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

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

用户加载页面并且导航是静止的。 用户然后向下滚动页面，然后在500像素（滚动原始导航）之后，导航动画进入使用固定定位粘在顶部的页面。

我现在正在工作（参见codepen： 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; } }); 

演示

尝试befory购买