Jquery:使用scrollTop制作动画粘性菜单

Question

我正在尝试创建一个动画粘性菜单。

用户加载页面并且导航是固定的。然后，用户向下滚动页面，大约 500 像素后(在原始导航上滚动)，导航动画进入使用固定定位粘在顶部的页面。

我现在可以使用它(请参阅代码笔: http://codepen.io/chrisyerkes/pen/uoFKl )但是，一旦我向上滚动并重置菜单的位置，下次我向下滚动页面时，它不再动画，只是卡入到位。我希望它像在第一页加载/滚动操作中一样向下动画。

当您向后滚动页面时，属性 style="top: 0px"似乎没有被删除，这可能会导致问题。我尝试使用removeAttr()在返回滚动时删除它，但每当它被删除(自动)时它就会不断弹出。

任何想法将不胜感激。谢谢!

Answer 1

我已经稍微更新了您的代码，现在它可以按预期工作。它的优点是，如果需要，它只会触发一次所有内容，而不是不断地触发。我还将选择器存储在变量中以避免大量重新查询。

JavaScript

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

    if (500 < $(window).scrollTop() && !scrolled) {
        nav.addClass('visible').animate({ top: '0px' });
        scrolled = true;
    }

   if (500 > $(window).scrollTop() && scrolled) {
        nav.removeClass('visible').css('top', '-30px');
        scrolled = false;      
    }
});

演示

Try befory buy