如何使用 Bootstrap 3.0 创建粘性导航栏？

使用 Bootstrap 创建粘性导航栏

当网站加载时，用户通常更喜欢导航栏始终显示在页面顶部。当用户向下滚动时，导航栏应向上滚动并最终固定在屏幕顶部。本指南演示了如何使用 Bootstrap 3.0 实现此目的。

使用 JQuery 和 JavaScript 的解决方案：

<div> <br>放置您想要的内容想要这里</h2><br> <p>只需调整 javascript 大小以匹配此窗口</p></div><p></p>
<pre class="brush:php;toolbar:false"><ul>

html, body {<br> 高度: 4000px;</p>}<p><br>.navbar - 修复了 {<br> 顶部：0;<br> z 索引： 100;<br> 位置：固定；<br> 宽度：100%；</p>}<h1></h1>body_div {<p><br>顶部：0；<br> 位置：相对；<br> 高度: 200px;<br> 背景颜色:绿色;</p>}<h1></h1>横幅{<p><br>宽度：100%；<br>高度：273px；<br>背景颜色：灰色；<br>溢出：隐藏；</p>}<h1></h1>nav_bar {<p><br>边框： 0;<br>背景颜色:#202020;<br>边框半径:0px;<br>边距底部:0;<br>高度:30px;</p>}<p><br>//下面的 css 用于链接，粘性导航不需要 <br>.nav_links {<br> 边距：0;</p>}<p><br>.nav_links li {<br> 显示：内联块；<br> 边距顶部：4px;</p>}<p><br> .nav_links li a {<br> 填充：0 15.5px;<br>颜色：#3498db;<br>文本装饰：无;<br>}</p>

$(document).ready(function () {<br> //更改下面的整数以匹配上部 div 的高度，我称之为<br>  //横幅。  只需在最后一个数字上加 1 即可。  console.log($(window).scrollTop())<br> //当您想要修复 nav<br> //bar 或 div 或其他内容时，确定滚动位置。  我为你停留在console.log中。  只要<br> //你知道位置就删除。 $(window).scroll(function () {<pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});
});

此解决方案使用 JavaScript 根据滚动位置在导航栏中添加和删除 navbar-fixed-top 类。导航栏固定的确切滚动位置可以通过更改 JavaScript 代码中的值来调整。

以上是如何使用 Bootstrap 3.0 创建粘性导航栏？的详细内容。更多信息请关注PHP中文网其他相关文章！