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

Question

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

1. 它不会粘在页面顶部。
2. 它不会正确 float 。

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

无论我怎样尝试，购物车都不会正确 float 。

关于我将如何解决这个问题的任何建议:

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

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

       <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>

Answer 1

编辑:您只需在通过所需的滚动条后分配 position: fixed，之前不应将其固定。

此外，您不能float fixed 元素。相反，请使用 right: 0;顶部:0； position: fixed; 当你想把它固定在右上角时。如果您需要 child 漂浮，您可以将 float 应用于所有 child 。