jquery - jQuery:使用scrollTop制作动画粘滞菜单

我正在尝试创建动画粘滞菜单。

用户加载页面，导航停止。然后，用户向下滚动页面，在经过500个像素（滚动到原始导航）之后，导航会以固定位置动画到固定在顶部的页面中。

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

当您向上滚动可能导致问题的页面时，似乎没有删除属性style =“ top：0px”。我尝试使用removeAttr（）在返回滚动时摆脱它，但是只要它被移除（自动），它就会不断弹出。

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

最佳答案

我对您的代码进行了一些更新，现在可以正常使用了。它具有的优点是，仅在需要时才触发所有内容，而不会连续触发。我还将选择器存储在变量中，以避免大量重新查询。

的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