javascript - 在平板电脑/手机模式下，我的粘性/固定到顶部导航栏不再粘性

Question

我使用 Bootstrap 制作了一个粘性/固定到顶部的导航栏。它具有响应性，因此当屏幕低于设定尺寸时，导航选项会变成汉堡菜单。我还添加了教程中的 JavaScript，以便它可以很好地滚动。

除了在平板电脑/手机模式下，当导航栏停止固定在顶部并变为静态时，它工作正常。参见 here对于差异/它应该是什么样的。我不确定我做错了什么。

我已经尝试了很多版本/教程，有时我会在两种情况下都觉得它很粘，但没有汉堡菜单扩展等。这是迄今为止我得到的最好的基本上。以下是 HTML:

<div class="header">
<div class="container">
    <nav class="navbar-default" role="navigation">
        <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand scroll-top">Company</a>
        </div>
        <!--/.navbar-header-->
    <div id="main-nav" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#" class="scroll-link" data-id="contact">Contact</a></li>
            <li><a href="#" class="scroll-link" data-id="about">About</a></li>
            <li><a href="#" class="scroll-link" data-id="testimonials">Testimonials</a></li>
        </ul>
    </div>
    <!--/#main-nav.navbar-collapse-->
</nav>
    <!--/.navbar-->
</div>
<!--/.container-->

和javascript:

  <script type="text/javascript">
 $(document).ready(function() {
// navigation click actions 
$('.scroll-link').on('click', function(event){
    event.preventDefault();
    var sectionID = $(this).attr("data-id");
    scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');         
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
    event.preventDefault();
    $('#main-nav').toggleClass("open");
});
});
 // scroll function
 function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}
  }
if (typeof console === "undefined") {
console = {
    log: function() { }
};
}

抱歉，如果我解释得不好。我大约一个月前尝试过导航栏然后放弃了，所以希望我没有忘记任何东西。

Answer 1

将 'navbar-fixed-top' 类添加到导航标签即

 <nav class="navbar-default navbar-fixed-top" role="navigation">

它会很好地工作。