使滚动导航栏在引导程序中的浏览器顶部停留

Make Scrolling NavBar Stick At Top Of Browser In Bootstrap

本文关键字：浏览器 顶部 停留 引导程序 滚动 导航      更新时间：2023-09-26

我是 Twitter Bootstrap 的新手，希望在深沉的 MastHead 底部有一个导航栏，当用户垂直滚动页面并且导航栏到达页面顶部时，将样式更改为，以便导航栏变为固定。我想要的效果与仅使用引导导航栏 http://www.happycog.com/相同。

因此，真正的问题是当导航栏滚动到位置 0 即：浏览器顶部时，如何触发导航栏固定顶部样式。

任何想法或指示将不胜感激。谢谢。

CSS 类navbar-fixed-top是您要添加的内容。

下面是一个示例：

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'>
    <!-- nav content -->
</nav>

你必须使用 javascript 来做到这一点。这是一个解决方案，它依靠jQuery将导航栏定位转换为固定位置，一旦它到达页面顶部，并在其位置粘贴一个临时div以防止布局更改。

http://jsfiddle.net/T6nZe/

你可以试试CSS3粘性位置：

.sticky {
  position: sticky;
  top: 10px; /* When the element reaches top: 10px, it becomes fixed. */
  z-index: 100;
}

浏览器支持：http://caniuse.com/#feat=css-sticky

我相信

这就是你要找的：http://www.w3schools.com/bootstrap/bootstrap_affix.asp

在以浏览器兼容性为目标时，以下内容可能更有用。

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 10px;
  z-index: 100;
}
相关文章：