我有一个菜单导航栏,位于标题
之后<header>
<center>
<img src=""> Some other stuff
</center>
</header>
<div class="navbar">
<div class="nav">
<ul class="meniunav">
<li><a href=""><img src="home.svg" class="navicon"> Home</a></li>
<li><a href=""><img src="info.svg" class="navicon"> Info</a></li>
<li><a href=""><img src="contact.svg" class="navicon"> Contact</a></li>
</ul>
</div>
</div>
标题的高度为150px,如果它到达那里我想让导航栏元素粘在页面顶部。更清楚的是:当我向下滚动时,我希望该元素在到达顶部时固定在顶部,如果我向上滚动并且它到达初始位置以移除固定位置。我怎么能这样做?
答案 0 :(得分:0)
你有两种方法可以做到:
首先:使用仅适用于firefox的position: sticky;
(我们将需要等待很多时间才能达到标准)
第二个(在每个浏览器上工作):javascript。 互联网上有很多脚本,您可以轻松找到它们。只需在Google中输入“Sticky Navigation”即可。 以下是它的示例:https://codepen.io/Guilh/pen/JLKbn
答案 1 :(得分:0)
好的,显然最简单的方法是:
$(window).scroll(function() {
if($(this).scrollTop() >= 150) {
$(".navbar").addClass("sticky");
}
else {
$(".navbar").removeClass("sticky");
}
});
粘性类包含:
.sticky {
position: fixed;
top: 0;
}