Question

我有一个完美的固定购物车。在页面加载时，购物车位于距离页面顶部350px的位置，在向下滚动页面350px后，购物车将固定到页面上，我的问题是购物车向上滚动购物车一直回到顶端页面，而不是回到原来的位置。

我该怎么做？

$(window).on("scroll", function() {
            if($(window).scrollTop() > 350) {
                $("#stickycart").css("margin-top", "0","right",$(window).scrollTop());
              
            }
        });

#stickycart{
    width: 25%;
    float:right;
    margin: 20px;
    margin-top:450px;
    float:right;
    right:0;
    top:0;
    margin-right: 4%;
     
    position: fixed;
}

<div id="stickycart">
            <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

如果你有可能使用购物车作为绝对项目，我会建议这样做：

https://jsfiddle.net/6trq2mg0/2/

CSS：

#cart {
  position: absolute;
  top: 350px;
  right: 0;
}

脚本：

$(window).on("scroll", function () {
    if ($(window).scrollTop() > 350) {
        $('#cart').css({"position" : "fixed", "top" : "0"});
    } else {
        $('#cart').css({"position" : "absolute", "top" : "350px"});
    }
});

Answer 2

我无法在代码中找到一致性，因为HTML中不存在#stickycart。但是，这可能是您想要的：http://codepen.io/anon/pen/jqdYVd

向下滚动后将固定车返回到原始位置

2 个答案: