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

Question

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

用户加载页面并且导航是静止的.用户然后向下滚动页面,然后在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购买