Question

我在Bootstrap中建立了一个网站。我添加了标题部分下方的导航栏。基本上我希望我的导航栏在滚动时保持在页面顶部。我看到了Bootstrap文档，看看这个功能是如何完成的，但是我找不到任何东西。所以这里是我site的链接，所以你可以看到它是如何的。如果您知道如何解决这个问题，请告诉我。

这里是完整的代码：

git diff remotes/origin/develop

Answer 1

请在此处阅读.navbar的Bootstrap文档：

http://getbootstrap.com/components/#navbar

Bootstrap Framework通过以下任何类本机支持固定导航：

.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top

每个人的功能都不同，因此请选择最能满足您对此项目需求的那个。

Answer 2

您可以通过向引导主题添加一些简单的css代码将导航栏固定到浏览器的顶部。该类包含在bootstrap中的sticky-nav。这是css示例，下面是使用css示例的导航示例。

  .page-header {
    padding-top: 80px; /* nav height */
  }
  .sticky-nav {
      position:fixed;
      top:0;
      width: 100%;
      z-index: 99999999;
  }

你也可以通过这样做只为桌面做这件事：

@media (min-width: 768px) {
  .page-header {
    padding-top: 80px; /* nav height */
  }
  .sticky-nav {
      position:fixed;
      top:0;
      width: 100%;
      z-index: 99999999;
  }
}

以下是HTML导航代码：

<nav class="row navbar navbar-trans sticky-nav navbar-white">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <img class="icon-x" src="img/m/x.svg" alt="Close Menu">
        </button>
        <a class="navbar-brand-trans" href="#"><img src="/img/logo-top-t.svg" alt="Logo">
        </a><a class="navbar-brand-white" href="#"><img src="/img/logo-top-w.svg" alt="Logo">
        </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/" id="home" class="active">Home</a></li>
          <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="serv-dropdown">Services <span class="glyphicon glyphicon glyphicon-menu-down"></span></a>
            <ul class="dropdown-menu">

              <div class="col-md-1 visible-md visible-lg"></div>

              <div class="col-sm-12 col-md-10">
                <div class="col-sm-3 heading hidden-xs">
                  <p>Services</p>
                </div>
                <div class="col-sm-3 hcol">
                    <li><a href="/consulting">Consulting Services</a></li>
                    <li><a href="/custom">Custom Software</a></li>
                    <li><a href="/django">Development Django</a></li>
                    <li><a href="/mobiledevelopment">Development Mobile</a></li>
                </div>
                <div class="col-sm-3 hcol">
                    <li><a href="/php">Development PHP</a></li>
                    <li><a href="/python">Development Python</a></li>
                    <li><a href="/webdevelopment">Web Development</a></li>
                </div>
                <div class="col-sm-3 hcol hidden-xs">
                  <span>Our Experience Drives</span> <br>
                  <span>Your Success</span> <br><br>
                  <button type="button" name="projects" class="jq-btn blue">OUR PROJECTS</button>
                </div>
              </div>

              <div class="col-md-1 visible-md visible-lg"></div>

            </ul>
          </li>
          <li><a href="/projects">Projects</a></li>
          <li><a href="/team">Team</a> </li>
          <li><a href="/blog">Blog</a></li>
          <li>
            <div class="col-xs-12 visible-xs text-center"><a id="contact-btn" onclick="toggleContact();">Contact Us</a></div>

            <a class="hidden-xs" id="contact-btn" onclick="toggleContact();">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 3

要拥有一个粘性标题（滚动时固定的标题），您需要将一个函数绑定到window.onscroll事件，该事件将检查标题是否通过当前滚动位置，并添加bootstrap的navbar-fixed-top类到它：

$(window).on('scroll', fixHeader);
var header = $('nav');
var headerOffset = header.offset().top;
function fixHeader(evt){    
  var currentScroll = $(window).scrollTop()
  if(headerOffset <= currentScroll){
    header.addClass('navbar-fixed-top')
  }
  else{
        header.removeClass('navbar-fixed-top');
  }
}

https://jsfiddle.net/hgLzqnqp/2/

您还希望在nav之后推送内容，因为它将从渲染流程中删除。以下是如何执行此操作的示例： https://jsfiddle.net/hgLzqnqp/3/

希望position: sticky会在某些时候来到CSS，并且已经有一些polyfills：https://github.com/filamentgroup/fixed-sticky

如何设置引导程序导航菜单在滚动时停留在页面顶部

3 个答案: