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

我有一个问题，希望有人能帮我解决。我目前正在构建一个webiste，并首次尝试使用jquery插件来创建一个粘性导航栏(http://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/)。

当我为nav标记分配一个#ID，并相应地更改CSS规则以仅应用于该特定的nav时，插件停止工作。问题是，我想在我的页面上有一些导航，但我看不到其他选项。

有什么建议吗？

谢谢！

下面是完整代码的链接：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');
        }
    });
});