滚动后 twitter bootstrap 修复导航栏答案

【问题标题】：twitter bootstrap fix navbar after scrolling滚动后 twitter bootstrap 修复导航栏
【发布时间】：2018-04-06 19:47:57
【问题描述】：

我有一个导航栏，在加载时从页面顶部开始大约 200 像素。当我向下滚动时，我希望导航栏将自己“附加”到页面的最顶部，并且在我滚动浏览其余内容时可见。我能够让导航栏保持在距离顶部 200px 的位置，它忽略了我向右拉的内容并将其全部拉向左侧。我需要确保导航栏保持可见并且布局/样式在整个过程中都是相同的。

下面是我的 jsfiddle，它显示了我遇到的问题

  <!-- Begin Logo / Search -->
  <header class="masthead">
      <div class="row">
        <div class="span6">
          <div class="logo pull-left">
              <h1><a href="/">name</a></h1>
          </div>
        </div>
        <div class="span6">
            <div class="pull-right hidden-phone">
                <form class="search" action="/search" id="site-search">
                    <input type="hidden" name="records" value="6">
                    <div class="input-append">
                        <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" />
                        <button class="btn" type="submit"><i class="icon-search"></i></button>
                    </div>
                </form>     
            </div>
        </div>
      </div>
  </header>         


  <!-- Begin Navbar -->
  <div>
    <div class="navbar navbar-static">
      <div class="navbar-inner" id="mastnav">
        <div class="container">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
            <div class="nav-collapse collapse">
                <ul class="nav"><li><a href="#">nav</a> </li></ul>
                <ul class="nav pull-right">
                    <li>
                        <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a>
                    </li>
                </ul>
            </div>      
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

JSFIDDLE

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

一旦导航变为affix，它就不再遵循正常的导航栏 CSS 样式。您可以为外部 DIV 容器提供一个 id，然后将其设置为 `affix' 元素。使用 CSS 确保它保持 100% 宽度。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Working Demo

【讨论】：

这个答案派对有效，但现在导航栏超出了右侧的页面
任何人都可以得到这个，这样导航栏就不会超出浏览器窗口的边界

【解决方案2】：

这是完成你想要的修改后的 jsfiddle：

更新：对不起！粘贴了错误的jsfiddle！当我播下反对票时才意识到！我会再做一次，一会儿更新

更新：这里是：

http://jsfiddle.net/KUPbD/4/

作为额外说明，您可以在 html 中使用 data-spy="affix" 和 data-offset-top="" 声明词缀，因此无需额外的内联脚本

【讨论】：

适用于所有浏览器，但不适用于 ipad 或 iPhone 设备，有什么想法吗？ - 实际上它确实有效，但有延迟
平板电脑延迟是由于滚动事件

【解决方案3】：

<script type="text/javascript">
    $(document).ready(function(e) {

        $(window).scroll(function () {
            if ($(window).scrollTop() > $('.navbar').offset().top) {
                $('.navbar').addClass('navbar-fixed-top');
                $('.navbar').removeClass('navbar-static-top');                  
            } else {
                $('.navbar').removeClass('navbar-fixed-top');
                $('.navbar').addClass('navbar-static-top');     
            }
        });         

    });
</script>

【讨论】：

【解决方案4】：

您需要将词缀附加到导航栏的外部容器上，我已经对其进行了一些更改...

这个js没有变化，但是html结构：-

$('#mastnav').affix({
      offset: {
        top: 0
      }
   });

演示：- http://jsfiddle.net/KUPbD/1/

【讨论】：