jQuery的：使用scrollTop的制作动画菜单粘 [英] Jquery: Using scrollTop to make animated sticky menu

问题描述

我试图创建一个动画菜单粘

I'm trying to create an animated sticky menu.

用户加载了页面和导航是静止的。然后用户向下滚动页面，之后像500像素（滚动比原先的导航），导航到动画使用固定定位粘在上面的页面。

User loads up the page and the navigation is stationary. User then scrolls down the page and after like 500 pixels (scrolling over the original navigation), the navigation animates into the page stuck to the top using fixed positioning.

我现在的工作（见codePEN：的http：// codepen.io/chrisyerkes/pen/uoFKl ）但是，一旦我滚动备份并将其重置菜单的位置，下一次我向下滚动页面，它不再动画，正好卡入到位。我希望它动画下来像它的第一个页面加载/滚动操作。

I have it working now (see codepen: http://codepen.io/chrisyerkes/pen/uoFKl) however, once I scroll back up and it resets the menu's position, the next time I scroll down the page, it no longer animates in, just snaps into place. I want it to animate down like it does on the first page load/scroll action.

它看起来像属性风格=顶：0像素当您滚动备份可能导致问题的页面不会被删除。我试着用removeAttr（）来摆脱它在返回滚动，但它一直在，只要它被删除弹出回（自动）。

It looks like the attribute style="top: 0px" doesn't get removed when you scroll back up the page which may be causing the problem. I tried using removeAttr() to get rid of it on return scroll, but it keeps popping back in whenever it is removed (automatically).

任何想法将是真正的AP preciated。谢谢！

Any ideas would be really appreciated. thank you!

推荐答案

我已经更新了您的code一点点，现在它按预期工作。它有一个如果需要，而不是不断地它激发一切只有一次advantag。我也存储选择在一个变量，以避免大量的重复查询的。

I've updated your code a little bit and now it works as expected. It has the advantag that it fires everything only once if needed and not constantly. I also stored the selector in a variable to avoid a lot of re-querying.

的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买

这篇关于jQuery的：使用scrollTop的制作动画菜单粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！