导航栏不粘

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

您的置顶贴 class 不在正确的元素上

CSS（仅当 .jumbotron1 有 .stuck 时有效）：

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

jQuery（正在设置 .stuck 到 .navbarSticky）

sticky.addClass(stuck);

编辑： 回应下面的评论。

您希望 .navbarSticky 卡住，并且您使用的样式与 .jumbotron1 相同，因此您需要一个 CSS 选择器，例如

.jumbotron1,
.stuck {

另请记住，由于您的超大屏幕设置为 width: 100%;，一旦您添加逗号，您的导航可能会位于超大屏幕下方。我忘记了 html 的自然 z-index 顺序，但无论如何，要修复它，请添加：

.stuck {
  z-index: 10;
}

这个，顺便说一句，你只添加到 .stuck 不要添加到 .jumbotron1。

Answer 2

position:relative is overriding position:fixed

在此cssclass

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

这里的相对位置覆盖 stuck 中的 position:fixed class 看看这个片段

所以我做了这个更改

新 classes

#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 下方滚动，因为 z-index 属性附加到 li 因为我不确定 div.lineup1position 是怎么回事滚动所以留在你身上

编辑：addClass 和 removeClass 正确地 used.So 删除了那部分

导航栏不粘

Navbar is not sticking

javascript

jquery

materialize