javascript - 导航栏不粘

Question

我使用的是materialize.css、materialize.js 和jquery 2.1.1。

我正在尝试在我的 .jumbotron1 之后构建一个粘性导航栏。我有 css 全部在那里，但 jquery 似乎没有运行。

我遵循了本教程:https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

CSS

body {
  padding-top: 400px;
}

.row {
  margin-bottom: 0;
}

.jumbotron1 {
  width: 100%;
  height: 400px;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
}

/* navbar styling */
nav.navbarSticky {
  margin-top: 0;
  position: relative;
}

nav {
  z-index: 998;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}

/*sticky navbar styling*/
.jumbotron1 .stuck {
  position: fixed;
  width: 100%;
  top: 0;
 }

/*lineup styling*/
.lineup1position {
  position: relative;
}
.lineup1 {
  height: 800px;
  background-color: #f5f5f5;
}

html

<!--jumbotron 1-->
<div class="container">
  <div class="row">
    <div class="col s12 valign-wrapper jumbotron1">
      <p class="valign center-block center-align">
        Andrea + Fiance<br>
      </p>
    </div>
  </div>
</div>
<!--navbar-->
<nav class="navbarSticky">
  <div class="nav-wrapper">
    <ul id="nav-mobile">
      <li><a href="#">line up</a></li>
      <li><a href="#">tickets</a></li>
      <li><a href="#">history</a></li>
      <li><a href="#">venue</a></li>
      <li><a href="#">details</a></li>
    </ul>
  </div>
</nav>
<!--lineup1-->
<div class="container lineup1position">
  <div class="row">
    <div class="col s8 offset-s2 lineup1">
      <p class="center-align">
        lineup<br>
        andrea - fiance<br>
        made of honor - best man<br>
        bridesmaid - groomsman - bridesmaid - groomsman<br>
      </p>
    </div>
  </div>
</div>

JavaScript

  var sticky = $(".navbarSticky")
  var stuck = "stuck";
  var hdr = $('.jumbotron1').height();

  $(window).scroll(function() {
    if( $(this).scrollTop() > hdr ) {
      sticky.addClass(stuck);
    } else {
      sticky.removeClass(stuck);
      }
  });

Answer 1

position:relative is overriding position:fixed

在这个CSS类中

nav.navbarSticky {
      margin-top: 0;
      position: relative;
    }

此处相对位置覆盖了 stuck 类中的 position:fixed看看这个片段

所以我做了这个改变

新类(class)

#topContainer{
  display:inline-block;
  width:100%;
  z-index:1001;
}


.stuck {
  width: 100%;
  display:inline-block;
  top: 10px;
  z-index:1001;
  position:fixed !important;
 }
.fixContainer{
  position:fixed !important;
  top:0px;
}

HTML

向顶部容器添加了 id 属性

<div class="container" id ="topContainer">
     // rest of code

JS

 var sticky = $(".navbarSticky")
  var stuck = "stuck";
  var hdr = $('.jumbotron1').height();
  $(window).scroll(function() {
  console.log($(this).scrollTop(),hdr)
    if( $(this).scrollTop() > hdr ) {
    $("#topContainer").addClass("fixContainer") //Change here
      sticky.addClass(stuck);
    } else {
     $("#topContainer").removeClass("fixContainer") //Change here
      sticky.removeClass(stuck);
      }
  });

您可以查看这个JSFIDDLE .

目前 div.lineup1position 正在滚动到 li 下面，因为 li 附加了 z-index 属性，因为我不确定如何>div.lineup1position 将滚动，因此将其留在您身上

编辑:addClass 和 removeClass 已正确使用。因此删除该部分