javascript - 滚动时如何将 div/导航栏粘贴到窗口顶部

Question

我在标题后面有一个菜单导航栏

<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>

标题的高度为 150 像素，如果导航栏元素到达页面顶部，我想让它粘在页面顶部。更清楚一点:当我向下滚动时，我希望该元素在到达它时固定在顶部，如果我向上滚动并且它到达初始位置以删除固定位置。我该怎么做？

Answer 1

有两种方法:

首先:使用position: sticky;，它只适用于 firefox(我们将不得不等待很多时间才能成为标准)

第二(适用于所有浏览器):javascript。 网上有很多脚本，你可以很容易地找到它们。只需在 Google 中输入“Sticky Navigation”。 这是它的例子:https://codepen.io/Guilh/pen/JLKbn