jQuery 滚动功能的替代方案？

Question

我有一个 jQuery 脚本如下：

$(document).ready(function(){

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('#algemeen').css('position','fixed');
        $('#algemeen').animate({
            top: '0px',
            left: '70%',
            width: '10%'
        }, 200);
    } else {
        $('#algemeen').css('position','absolute');
        $('#algemeen').animate({
            top: '300px',
            left: '100px',
            width: '200px'
        }, 200);
    }
});

});

如您所见，我有这个 div“#algemeen”，它会在页面向下滚动 100 像素时改变其位置。问题是，它非常滞后，当我向上滚动时，它经常停留在 'downscroll' 位置。有没有更好的方法来实现我的目标？

提前致谢！

Answer 1

我喜欢做的事情是在您滚动时监听一个事件，当 window.scrollY 到达所需的点时，我运行 animations/functions/whatever。我可能还会添加一个布尔值或整数值，该值会在您应用更改时更改，这样您就不会在每次 if 或 else 语句通过时都不断地进行更改。（可能是它对你来说滞后的原因）

var changesMade = 0;

window.onscroll = function() {
    if (window.scrollY > 100 && changesMade != 1) {
        $('#algemeen').css('position','fixed');
        $('#algemeen').animate({
            top: '0px',
            left: '70%',
            width: '10%'
        }, 200);
        changesMade = 1;
    } else if (window.scrollY < 100 && changesMade != 0) {
        $('#algemeen').css('position','absolute');
        $('#algemeen').animate({
            top: '300px',
            left: '100px',
            width: '200px'
        }, 200);
        changesMade = 0;
    }
}

希望对您有所帮助。

Answer 2

更好的方法是使用CSS transition property and jQuery to add/remove class. Please check this Fiddle，我们切换class animated:

Javascript:

$(document).on('ready', function() {
    var scroller = $('#algemeen');
    $(window).on('scroll', function(){
        if ($(this).scrollTop() > 100) {
            scroller.addClass('animated');
        } else {
            scroller.removeClass('animated');
        }
    });
});

比CSS:

#algemeen {
    position: absolute;
    top: 300px;
    left: 100px;
    width: 200px;
    transition: all linear .2s;
}
#algemeen.animated {
    position: fixed;
    top: 0;
    left: 70%;
    width: 10%;
}

更好是因为：

浏览器动画比脚本更快，它们使用更少 CPU，它们优化得更好，因此它们通常看起来更好
更改CSS比脚本更容易，您可以应用媒体查询等

This article 可能会说服您（有一个不错的演示）。

jQuery 滚动功能的替代方案？

Alternative for jQuery scroll function?

javascript

jquery

scroll

function

scrolltop