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);
    }
});

});

如您所见，当页面向下滚动100px时，我有了这个div'#algemeen'来更改其位置。 问题是，它非常笨拙，当我向上滚动时，它通常保持在“向下滚动”位置。 有没有更好的方法可以实现我的目标？

提前致谢！

Answer 1

我想做的就是在window.scrollY滚动时都监听一个事件，当window.scrollY到达所需的位置时，我将运行动画/函数/任何东西。 我还可能会添加一个布尔值或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过渡属性和jQuery 添加 / 删除类。 请检查此小提琴 ，我们切换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比编写脚本更容易，您可以应用媒体查询等。

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