javascript - 修复了导航栏停止滚动

Question

我正在使用下面的函数来制作一个固定的导航栏。但是，在某个高度（当几乎整个页面都显示但它有滚动时）它会阻止页面滚动并且页面抵抗滚动。我希望导航栏具有粘性，但不会阻止页面滚动到某个高度。任何帮助将不胜感激。谢谢

HTML：

    <nav id="navbar_2" class="navbar navbar-default navbar-static-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                
                <button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed">
                MENU
                </button>
                <a class="navbar-brand" href="#"><img src="https://cdn2.vectorstock.com/i/1000x1000/19/11/wi-fi-hotspot-icon-flat-design-vector-14071911.jpg" class="img-responsive" alt="Logo" align="center"  ><br><br></a>
                <!--<span class="navbar-text"><img src="" width=20% height=20%></span>
                --><!--<img src="https://cdn2.vectorstock.com/i/1000x1000/23/56/mobile-phone-icon-vector-2382356.jpg" width="40px" height="50px" id=mobile_info4 style="margin: 15px -330px;"/>
                 -->
                 <span  class="navbar-text" id=mobile_info style="font-size: 12px;">
                <%= address %><br>
                    <%= manufacturer %><br>
                        <%= model %><br>
                         </span>
                        
                <a class="navbar-brand" href="#" hidden>
                    Administrator
                </a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      
                <form class="navbar-form navbar-left" method="GET" role="search" >
                    <div class="form-group">
                        <input type="text" name="q" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    
                    <li><a href="/index/<%= role %>/<%= _id %>/<%= token %>" >Home</a></li>
                    <!--<li class="dropdown">-->
                        <li><a href="/logout" >Logout</a></li>
                    <!--    <li><a href="/test2" >Testing Page</a></li>
                     -->
                    <!--<a href="/logout" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">-->
                    </ul>   
                        <!--<ul class="dropdown-menu" role="menu">
                                <li class="dropdown-header">SETTINGS</li>
                                <li class="divider"></li>
                                <li><a href="/logout">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

Javascript：

    $(document).ready(function() {
    
      var $navbar = $("#navbar_2");
      
      AdjustHeader(); // Incase the user loads the page from halfway down (or something);
      
      $(window).scroll(function() {
          AdjustHeader();
      });
      function AdjustHeader(){
        if ($(window).scrollTop() > 60) {
          if (!$("#navbar_2").hasClass("navbar-fixed-top")) {
            $("#navbar_2").addClass("navbar-fixed-top");
            $('body').css('padding-top', $('.navbar').outerHeight() + 'px');
          }
        } else {
            $("#navbar_2").removeClass("navbar-fixed-top");
          $('body').css('padding-top', '0');
        }
      }
    });

CSS：

    #navbar_2 a {
      float: left;
      display: block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

标签： javascripthtmlcss