jquery - 如何使我的导航栏静态(向下滚动时固定在页面顶部)？

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

试试这个我把示例脚本放在那里你可能需要这个Demo Here

$(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;

});