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;
    }

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

所以我做了这个改变

新课程

#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＆amp;正确使用removeClass。删除该部分

Answer 2

您的粘性类不在正确的元素上

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 {

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

.stuck {
  z-index: 10;
}

这是BTW，您只需添加到.stuck，请不要将其添加到.jumbotron1。

Navbar没有坚持

2 个答案: