如何使导航栏保持静态(向下滚动时固定在页面顶部)

Question

这是我的代码：

<div id="nav" class="ten columns">
<ul class="navb">
<li <?php if ($page == "#about"){ echo "class='active'";} ?> ><a href="#aboutintro">About</a></li>
<li <?php if ($page == "#portfolio"){ echo "class='active'";} ?> ><a href="#portintro">Portfolio</a></li>
<li <?php if ($page == "#content"){ echo "class='active'";} ?> ><a href="#contactintro">Contact</a></li>
<li <?php if ($page == "#home"){ echo "class='active'";} ?> ><a href="#homeintro">Home</a></li>
</ul>
</div>

当我向下滚动时，我希望顶部的导航栏固定在页面顶部。这是我到目前为止在导航栏上的css：

ul.navb li.active {
border-bottom: 2px solid #9EADFF;
}

Answer 1

试试这个，我放了示例脚本，你可能需要这个演示这里

$(document).ready(function () {
    var menu = $('.menu');
    var origOffsetY = menu.offset().top;
    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('sticky');
            $('.content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('sticky');
            $('.content').removeClass('menu-padding');
        }

    }
    document.onscroll = scroll;
});

Answer 2

如果您没有特殊要求，这就足够了：

#nav{
    position:fixed;
    top:0;
}