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

Question

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

我是否必须使用Javascript或其他方式使用CSS？怎么样？

Answer 1

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

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

Answer 2

您可以使用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;确定的位置从顶部开始。