Question

我有一个问题，我希望有人可以帮助我。我目前正在构建一个网站，并且第一次尝试使用jquery插件来创建一个粘性导航栏（http://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/）。

当我将#ID分配给导航标记，并相应地更改CSS规则以仅应用于此特定导航时，插件将停止工作。问题是我想在我的页面上有几个导航，但我没有看到另一个选项。

有什么建议吗？

谢谢！

以下是完整代码的链接： http://codepen.io/anon/pen/gbQBOo

HTML：

<section id="screen1">

    <p>Scroll down</p>

    <nav id="main-nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>

CSS：

/* Navigation Settings */

#main-nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: #fff;
}

JS：

$(document).ready(function(){
    $(window).bind('scroll', function() {
        var navHeight = $( window ).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('#main-nav').addClass('fixed');
        }
        else {
            $('#main-nav').removeClass('fixed');
        }
    });
});

Answer 1

在CSS中，#main-nav比.fixed更精确，因此它优先。

你可以：

1）将.fixed更改为#main-nav.fixed

2）将position从.fixed设置为fixed!important

3）不要使用id而是使用导航的特定类，并确保在新类之后定义.fixed

在为元素分配id时，jQuery插件停止工作

1 个答案: