滚动x量后，粘性导航栏不会返回顶部

时间：2017-06-20 23:00:36

标签： javascript jquery html css

尝试在滚动标题后创建一个粘贴到页面顶部的导航栏。我正在关注此视频https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2 

var mn = $("main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
  if ($(this).scrollTop() > hdr) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});
body {
  color: #DFE4E7;
  font-family: 'Open Sans', sans-serif;
  background-color: #1B1E23;
  padding-top: 300px;
}

header {
  background: #67A4C2;
  height: 300px;
  padding-top: 50px;
}

h1 {
  font-size: 25px;
}

p {
  position: relative;
  font-size: 15px;
}

.main,
.main-nav {
  position: relative;
}

.main-nav {
  background: #35393E;
  text-align: center;
  height: 45px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}

header,
.main-nav-scrolled {
  position: fixed;
  top: 0;
  width: 99%;
}

.main {
  top: 0;
  background: #f2f2e8;
  padding: 110px 50px 50px;
}

li {
  display: inline;
}

.li-fixed {
  top: 0;
  z-index: 150;
  position: fixed;
  width: 100%;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a :hover:not(.active),
.dropdown:hover .dropbtn {
  background-color: #111;
}

.active {
  background-color: #44B1E8;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #575757;
  min-width: 160 px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}
<!doctype html>
<html>

<head>
  <title>The Wor</title>
</head>

<body>
  <header>
    <center>
      <br>
      <br>
      <h1>The Work of</h1>
      <h1></h1>
      <br>
      <p>Welcome to My Creation</p>
    </center>
  </header>
  <nav class="main-nav">
    <li><a class="active" href="/main.html">Home</a></li>
    <li><a href="/creations.html">My Creations</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Artworks</a>
      <div class="dropdown-content">
        <a href="/artworks.html">Artworks</a>
        <a href="/designs.html">Designs</a>
      </div>
    </li>
    <li><a href="/contact.html">Contact</a></li>
  </nav>
  <div class="main">
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

首先，根据您发布的代码，您不包含jQuery库。

其次，您的mn变量未使用正确的jQuery选择器。它应该是$(".main-nav") 

jQuery(document).ready(function($) {

  var mn = $(".main-nav");
  mns = "main-nav-scrolled";
  hdr = $('header').height();

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

});
body {
  color: #DFE4E7;
  font-family: 'Open Sans', sans-serif;
  background-color: #1B1E23;
  padding-top: 300px;
}

header {
  background: #67A4C2;
  height: 300px;
  padding-top: 50px;
}

h1 {
  font-size: 25px;
}

p {
  position: relative;
  font-size: 15px;
}

.main,
.main-nav {
  position: relative;
}

.main-nav {
  background: #35393E;
  text-align: center;
  height: 45px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}

header,
.main-nav-scrolled {
  position: fixed;
  top: 0;
  width: 99%;
}

header {
  top: 0;
}

.main-nav-scrolled {
  top: 10px;
}

.main {
  top: 0;
  background: #f2f2e8;
  padding: 110px 50px 50px;
}

li {
  display: inline;
}

.li-fixed {
  top: 0;
  z-index: 150;
  position: fixed;
  width: 100%;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a :hover:not(.active),
.dropdown:hover .dropbtn {
  background-color: #111;
}

.active {
  background-color: #44B1E8;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #575757;
  min-width: 160 px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <title>The Wor</title>
</head>

<body>
  <header>
    <center>
      <br>
      <br>
      <h1>The Work of</h1>
      <h1></h1>
      <br>
      <p>Welcome to My Creation</p>
    </center>
  </header>
  <nav class="main-nav">
    <li><a class="active" href="/main.html">Home</a></li>
    <li><a href="/creations.html">My Creations</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Artworks</a>
      <div class="dropdown-content">
        <a href="/artworks.html">Artworks</a>
        <a href="/designs.html">Designs</a>
      </div>
    </li>
    <li><a href="/contact.html">Contact</a></li>
  </nav>
  <div class="main">
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
    <p>The</p>
  </div>
</body>

</html>

相关问题
最新问题