【发布时间】：2017-06-21 22:54:56
【问题描述】：
尝试制作一个粘性导航栏，在滚动过去标题后转到页面顶部。我在关注这个视频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>【问题讨论】：
标签： javascript jquery html css