Question

我的粘性购物车有两个小问题：

它不会粘在页面顶部。
它不会浮动。

我有一个完美运行的固定购物车，我的问题是页面加载时页面上放置了购物车一段时间，让我说200px这个例子，当我向下滚动页面时，购物车滚动我，但它上面有200px的间距，而不是粘在页面的顶部。

无论我尝试什么，推车都不会向右浮动。

有关如何解决此问题的任何建议：

＆＃13;

   $(window).on("scroll", function() {
            if($(window).scrollTop() > 50) {
                $("#cart").css("top","right",$(window).scrollTop());
              
            }
        });

＆＃13;

#cart{
    width: 25%;
    float:right;
    margin: 20px;
    margin-top:10%;;
    float:right;
     
    position: fixed;
}

＆＃13;

       <div id="cart">
            <p id='order'>My Order</p>
            <p id='estimated'>Average Delivery <br>
                <b id='avg'><?php echo $avg_del ?></b><br> minutes</p> 
            <div id="prods_here">
                <!-- PLACE PRODUCTS HERE-->
<?php cart(); ?>  
            </div>
        </div>

＆＃13;

Answer 1

编辑：您需要在通过所需的滚动顶部之后仅指定position: fixed，它之前不应该固定位置。

此外，您不能float fixed元素。相反，如果要将其粘贴到右上角，请使用right: 0; top: 0; position: fixed;。如果您需要孩子们漂浮，您可以向所有孩子申请浮动。

Answer 2

您正在使用position: fixed;，因此您必须指定与浏览器窗口相关的位置。所以，如果你想要正确地浮动它，你必须做类似的事情：

position: fixed;
top: 0;
right: 0;

至于上边距，您正在编写，margin-top: 10%;正在创建边距，如果您不想要它，请将其设为0

固定购物车，滚动但不会粘在页面顶部

2 个答案: