javascript - JS 中的粘性菜单

Question

各位

我已经实现了一个脚本，使我的菜单在向下滚动时具有粘性。

该功能有效，但是当向上滚动时它突然开始出现奇怪的行为 - 它没有回到原来的位置，而是停留在最顶部。

我一定是改变了什么导致了这个，但我想不通。

菜单/脚本在 http://www.mtscollective.com 上.

如果有任何帮助，我将不胜感激。谢谢!

脚本:

<script type='text/javascript'>
    jQuery(document).scroll(function () {
            if(jQuery(this).scrollTop() &gt; 175) {
                jQuery(&#39;.menu-secondary-wrap&#39;).css(&#39;position&#39;, &#39;fixed&#39;);
                jQuery(&#39;.menu-secondary-wrap&#39;).css(&#39;top&#39;, &#39;0&#39;);
                jQuery(&#39;.menu-secondary-wrap&#39;).css(&#39;width&#39;, &#39;950px&#39;);
                jQuery(&#39;.menu-secondary-wrap&#39;).css(&#39;box-shadow&#39;, &#39;0 -2px 6px 2px #555 &#39;);
    } else {
        jQuery(&#39;.menu-secondary-wrap &#39;).css(&#39; position &#39;,&#39; static &#39;);
    }
    });
</script>

Answer 1

我建议您将 CSS 和 javascript 分开。然后，您可以使用 jQuery 的 addClass/removeClass 方法添加/删除特定的 CSS 类。除此之外，我还会使用 $element.offset().top; 将菜单到文档顶部的距离存储到一个变量中。

CSS

.static {
    position: fixed;
    top: 0;
    width: 950px;
    box-shadow: 0 -2px 6px 2px #555;
}

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script type='text/javascript'>
    var $menu = $('.menu-secondary-wrap');
    var menu_top = $menu.offset().top;

    $(document).scroll(function () {
        if( $(window).scrollTop() > menu_top ) {
            $menu.addClass('static');
        } else {
            $menu.removeClass('static');
        }
    });
</script>

我整理了一个 JSFiddle .希望这对您有所帮助!