jQuery滚动功能的替代品？答案

【问题标题】：Alternative for jQuery scroll function?jQuery滚动功能的替代品？
【发布时间】：2015-03-16 15:11:10
【问题描述】：

我有一个 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);
    }
});

});

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

提前致谢！

【问题讨论】：

尝试不使用 animate ，即 $('#algemeen').css({top: '300px', left: '100px', width: '200px'}); 您在每个滚动条上设置 200 毫秒的动画（因为您总是匹配这两个条件之一）。此外，在 css 中进行样式设置并让 jquery 简单地添加和删除一个类（isScrolled 等），这也将提高性能，因为 js 的工作量要少得多，而 css 正在做它最擅长的事情

标签： javascript jquery function scroll scrolltop

【解决方案1】：

更好的方法是使用CSS transition property 和jQuery 到add/remove 类。请查看this Fiddle，我们切换类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 可能会说服你（有一个很好的演示）。

【讨论】：

【解决方案2】：

我喜欢做的事情是在您滚动的任何时候监听一个事件，当window.scrollY 到达所需的点时，我会运行动画/函数/任何东西。我还可以添加一个布尔值或整数值，当您应用更改时会更改，这样您就不会在每次 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;
    }
}

希望这有帮助。

【讨论】：