当导航栏放置在网页顶部时，如何修复导航栏

How can I fix the navigation bar when it is placed on top of the web page?

本文关键字：导航 何修复 顶部 网页      更新时间：2023-09-26

就像页面 http://9to5mac.com 一样，我想让导航栏在网页顶部时固定下来。

我必须使用Javascript或其他使用CSS的方式吗？以及如何使用？

您可以使用CSS执行此操作。您可以使用position:fixed;来固定导航栏的位置。例如，如果导航栏具有class="navigation"然后你可以像这样固定它的位置。

.navigation {
  position: fixed;
  height:50px;
  width: 100%;
  margin-top: -1.5em;
}

在此代码中position:fixed;固定div（导航栏）的位置 高度确定覆盖屏幕整个宽度的div width:100%;的高度，而margin-top: -1.5em;确定div 从顶部的位置。

CSS3 - 目前仅在Firefox中，通过"position：sticky"，但它也应该在今年开始在最新的浏览器中工作（希望如此）。https://developer.mozilla.org/en-US/docs/Web/CSS/position

跨平台解决方案：Javascript（jQuery），搜索它（关键字：粘性标头jquery javascript），那里有很多不错的库。

相关文章：