这是我的代码:
<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;
}
最佳答案
试试这个我把示例脚本放在那里你可能需要这个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;
});
关于jquery - 如何使我的导航栏静态(向下滚动时固定在页面顶部)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28877402/