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

<强>演示

Try befory buy

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

1 个答案: