我知道如何使用 position: fixed; 让它随着页面滚动，但我的导航栏不在页面顶部，它在我的标题下面。我希望导航栏直接保留在标题下方，直到页面顶部点击它，然后我希望它随页面向下滚动。我已经尝试使用 JS 来执行此操作并使用 JSfiddle 我能够让它工作 http://jsfiddle.net/uaqh018d/78/
但是，当我将它应用到我的网站时它不起作用，我也不知道为什么。
要遵循的站点代码:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--begin header & navbar-->
<div class="header">
<div class="container">
<div class="banner">
<h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Lets Plays</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
</div>
</div>
<!--end header & navbar-->
<!-- begin content-->
<div class="container">
<div class="content">
</div>
</div>
<!--end content-->
<script type="text/javascript" src="navfunction.js"></script>
</body>
</html>
CSS
body{
background: #ffda0a;
width: 100%;
margin: auto;
}
.container{
width: 960px;
margin: 0 auto;
}
.header{
width: 100%;
height: 250px;
margin: 0 auto;
top: 0;
}
.content{
background-color: rgba(255,255,255,.5);
width: 100%;
margin: 0 auto;
margin-left: 1px;
clear: both;
}
a{
text-decoration: none;
color: #ffda0a;
}
li{
list-style: none;
margin-left: 75px;
float: left;
font-size: 25px;
}
.nav{
background: #a71e1f;
width: 960px;
height: 30px;
margin-left: 1px;
}
.nav.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
.banner{
height: 230px;
}
JS
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#nav').addClass('fixed');
}
else
{
$('#nav').removeClass('fixed');
}
});
});
如果有人能解决这个问题，我将不胜感激。
最佳答案
请参阅更正后的 fiddle - http://jsfiddle.net/drecodeam/8Lubmkvw/
您在 HTML 中使用类，但在 jQuery 中将它们作为 ID 访问。
正确的JS应该是
$(document).ready(function () {
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.header').height()) {
$('.nav').addClass('fixed');
} else {
$('.nav').removeClass('fixed');
}
});
});
关于javascript - 试图让我的导航栏停留在页面顶部并随其滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31444638/