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;

});

Answer 2

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

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

如何使我的导航栏保持静态（在向下滚动时固定在页面顶部）？

2 个答案: