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'，当页面向下滚动100px时会改变它的位置。问题是，它非常滞后，当我向上滚动时它经常处于“向下滚动”状态。有没有更好的方法来实现我的目标？

提前致谢！

Answer 1

我喜欢做的事情是在你滚动的任何时候都有一个事件监听，当window.scrollY到达所需的点时，我运行动画/函数/无论如何。我也可以添加一个boolean或int值，当你应用更改时它会发生变化，这样你就不会在每次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和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可能会说服你（有一个很好的演示）。

替代jQuery滚动功能？

2 个答案: