$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('.sunContainer').height() ) {
$('.nav').addClass('stick');
} else {
$('.nav').removeClass('stick');
}
});
});html, body {
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.stick {
position: fixed;
}
#wrapper {
height:3000px;
width: 100%;
text-align: center;
}
.nav {
width: 90%;
height:50px;
background-color:#FFB00F;
text-align: center;
margin: 0 auto;
}
.tab_holder {
width:1000px;
text-align: center;
}
li {
width:120px;
height:50px;
display: inline-block;
text-align: center;
}
li:hover {
background-color:#2F4F4F;
}
a {
text-decoration: none;
color:black;
}
.imge {
margin-top: 50px;
}
.sunContainer {
background-color:#187249;
width:100%;
height:700px;
text-align: center;
}
.content {
background-color: lightsalmon;
width:100%;
height:700px;
}
.third {
background-color: khaki;
width:100%;
height:700px;
}<!DOCTYPE>
<html>
<head>
<link href='sunset.css' rel='stylesheet'>
</head>
<body id='body'>
<div id='wrapper'>
<div class='sunContainer'>
<div class='nav'>
<ul class='tab_holder'>
<li><a href='#'>About</a></li>
<li><a href='#'>The Kidd Frankie</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- Find a picture of the rising sun -->
<img class='imge' src='one.jpg'>
<img class='imge' src='two.jpg'>
<img class='imge' src='three.jpg'>
<img class='imge' src='four.jpg'>
</div>
<div class='content'>
Stuff will be here
</div>
<div class='third'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='sunset.js'></script>
</body>
</html>只是在尝试和玩耍时，我遇到了一个问题。问题是，每当我的导航添加课程时，它就会剩下。起初，我认为这是因为我没有在.stick类中添加任何内容，但意识到这不是问题。有人遇到这个问题吗？似乎是CSS问题，而不是JS。预先感谢！
您使用margin: 0 auto居中。但是，当该.stick类分配position: fixed时，此中心方法将不再起作用 - 它仅适用于position: relative元素。
由于您的CSS中没有其他参数，作为固定元素，它只是将其放置在默认位置left: 0
您可以通过将left: 50%;和transform: translateX(-50%);分配给它来避免。
$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('.sunContainer').height() ) {
$('.nav').addClass('stick');
} else {
$('.nav').removeClass('stick');
}
});
});html, body {
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.stick {
position: fixed;
left: 50%;
transform: translatex(-50%);
}
#wrapper {
height:3000px;
width: 100%;
text-align: center;
}
.nav {
width: 90%;
height:50px;
background-color:#FFB00F;
text-align: center;
margin: 0 auto;
}
.tab_holder {
width:1000px;
text-align: center;
}
li {
width:120px;
height:50px;
display: inline-block;
text-align: center;
}
li:hover {
background-color:#2F4F4F;
}
a {
text-decoration: none;
color:black;
}
.imge {
margin-top: 50px;
}
.sunContainer {
background-color:#187249;
width:100%;
height:700px;
text-align: center;
}
.content {
background-color: lightsalmon;
width:100%;
height:700px;
}
.third {
background-color: khaki;
width:100%;
height:700px;
}<!DOCTYPE>
<html>
<head>
<link href='sunset.css' rel='stylesheet'>
</head>
<body id='body'>
<div id='wrapper'>
<div class='sunContainer'>
<div class='nav'>
<ul class='tab_holder'>
<li><a href='#'>About</a></li>
<li><a href='#'>The Kidd Frankie</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- Find a picture of the rising sun -->
<img class='imge' src='one.jpg'>
<img class='imge' src='two.jpg'>
<img class='imge' src='three.jpg'>
<img class='imge' src='four.jpg'>
</div>
<div class='content'>
Stuff will be here
</div>
<div class='third'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='sunset.js'></script>
</body>
</html>