滚动折叠后自举3修复

Question

我面临Bootstrap 3的问题。我有一个页面导航的部分和滚动导航栏后的修复。当它滚动时，导航栏被固定并改变背景颜色。但是，当涉及到小屏幕导航栏不崩溃，它不保持固定。

这是html的一部分。

<div class="navigate clearfix"> 
     <div class="inner"> 
      <h3 class="navigate-brand">Brand</h3> 
      <nav class="navbar" role="navigation">  
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" > 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div class="navbar-collapse collapse" id="menu"> 
      <ul class="nav navigate-nav menu-right" > 
       <li class="active"><a href="#top">Home</a></li> 
       <li><a href="#s1">s1</a></li> 
       <li><a href="#s2">S2</a></li> 
       <li><a href="#s3">s3</a></li> 
       <li><a href="#s4">s4</a></li> 
      </ul> 
      </div> 
      </nav> 
     </div> 
    </div> 

与背景变化的JS：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > $(window).height()){ 
      $(".navigate").css({"background-color" : "red"});     
     }else{ 
      $(".navigate").css({"background-color":"transparent","background":"transparent"}); 
     } 
    }) 

}) 

Answer 1

您可能需要按照指示：基于上述https://getbootstrap.com/components/#navbar

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    ... 
    </div> 
</nav> 

，我已经准备了小提琴为你导航栏保持固定在任意给定的屏幕宽度：http://jsfiddle.net/dmv73fzr/

希望它可以帮助你！