1

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

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

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

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

任何想法都会非常感激。谢谢你！

4

2 回答 2

9

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

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

演示

先试后买

于 2013-08-27T19:33:34.683 回答
0 
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;      
    }
});

它运行良好，但是当我们第一次滚动时，它没有动画。并找到了解决方案，我们应该添加下面给出的样式

.nav {
  top: -30px;
}
于 2021-12-17T06:48:32.860 回答