javascript - 为元素分配 id 时 jQuery 插件停止工作

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 是在那个新类之后定义的