顶部栏覆盖网页 header

Question

我正在制作一个网站，想要一个位于屏幕顶部的导航栏。我可以做到这一点，但当我滚动到顶部时，它会超过 header。如何让它在页面顶部之前停止与用户一起滚动？我看过无数教程，但 none 似乎有效。我想我需要 JavaScript 才能在一定高度松开杆，但不确定如何。另外，当用户向下滚动时如何重新粘贴它？

Answer 1

是的，您需要 JavaScript 来处理这个问题。它并不太复杂，但是您基本上需要为 window 上的 scroll 事件添加一个事件处理程序，并且在处理程序中您可以检查 window 的 scrollTop =] 查看滚动了多少。当它滚动 "enough"（通常是你的 header 的高度）时，你可以将 header 的位置切换到固定。

你可以在优秀的 CSS Tricks 上看到关于它的演示，并且有很多教程和插件可以帮助解决这个问题。

Answer 2

是的，正如danwellman所说，你需要js。我在我的网页中使用了一个小代码。

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
});

您需要 "scrolling-nav.js" 之类的文件或任何您喜欢的文件。在你的 html 中，不要忘记调用它。

// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>

您可以找到更多很酷的可能片段。这实际上是为了在“51”的偏移量之后保持导航栏固定。您还可以在选择菜单按钮后将平滑的移动添加到网页部分。例如，如果您有一个单页网站。这也将是js。

祝你好运。 :)

顶部栏覆盖网页 header

Topbar covering webpage header

javascript

html

css