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。希望这有帮助！

JS中的粘性菜单

1 个答案: