Question

我无法找到一个代码，说明如果此网站向下滚动，我希望div同时向上移动，直到我滚动超过一定数量的像素。

因此，如果我向下滚动100像素，我的div向上移动100像素，当我通过120像素时，函数停止。当我再次向上滚动时，功能会再次启动，但当然会产生相反的效果。

现在我有这个代码，但我希望它是平滑的，逐个像素，而不仅仅是当poisiton是正确时的效果。

$(window).scroll(function(){ 
var a = 145;
var pos = $(window).scrollTop();
if(pos > a) {
    $("#mobil .holder").css({
                top: '0'
            });
}
else {
    $("#mobil .holder").css({
        top: '145px'
            });
}
});

Answer 1

只需使用：

$(window).scroll(function(){ 
    var a = 145;
    var pos = $(window).scrollTop();
    $("#mobil .holder").css({
                top: -(Math.min(pos, 145))
            });
});

它取消了滚动顶部的值，因为你希望它向上移动。 Math.min()用于设置限制。它永远不会超过145px。

Answer 2

你可以使用animate来获得平滑度并检查pos是否大于120

$(window).scroll(function () {
    var pos = $(this).scrollTop();
    $('div').stop().animate({
        top: (pos >=120?120:pos)
    }, 1000);
});

DEMO

向下移动每个像素向上移动1px

2 个答案: