Question

我正在尝试创建一个导航，当它点击页面顶部时会粘到我网站的顶部。（当用户位于页面顶部时，导航是从顶部280px）我在Wordpress中使用Bootstrap 3框架。

这是一个很常见的事情，我找到了很多例子，但似乎无法让它为我工作。

我有通用的Bootstrap导航。我试图将以下代码放入，但没有成功。

HTML（在我的＆lt; head＆gt;标记中）

<script>
  $('#nav').affix({
  offset: {
    top: $('header').height()
  }
  });   
</script>

HTML

<body <?php body_class(); ?> >

<header class="masthead">
 <div class="container">
   <div class="row">
     <div class="col-sm-6">
       <h1><a href="#" title="scroll down for your viewing pleasure">Bootstrap 3 Layout Template</a><p class="lead">Big Top Header and Fixed Sidebar</p></h1>
     </div>
     <div class="col-sm-6">
     </div>
   </div>
 </div>
</header>           


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
       <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>        
   </div>
  </div><!-- /.navbar -->
</div>
</div>

CSS

header {
  height:280px;
}

#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index:10;
}

滚动到/过去时导航到顶部 - Bootstrap 3

0 个答案: