基本上,当导航栏(或任何元素)到达页面或窗口的顶部时,它将向元素添加一个粘性类,CSS将使其固定。作为一个IF语句起作用,所以当它不在顶部附近时,它会删除该类,使其恢复正常。
我已正确完成所有代码,双重和三重检查所有内容。在Chrome上的Developer工具中,我可以看到jQuery正确地完成了它的工作,在正确的时间添加和删除了类,只是CSS似乎不起作用。
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
* {
margin: 0;
padding: 0;
font-family: "Helvetice Neue", sans-serif;
}
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/HelveticaNeue.otf");
}
html, body {
width: 100%;
height: 100%;
}
div#container {
width: 100%;
height: 100%;
}
div#content {
width: 100%;
height: 100%;
}
section#main-bg {
width: 100%;
height: 100%;
}
#main-bg img {
width: 100%;
height: 100%;
position: fixed;
z-index: -9999; /* always on bottom */
}
nav {
width: 100%;
height: 60px;
bottom: -60px;
background-color: #333333;
}
/* nav */ .sticky {
position: fixed;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-left: 40px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
line-height: 60px;
}
div#content {
width: 100%;
height: 2000px;
background-color: #dedede;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Murray | My Personal Page</title>
<meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts/homemadeSticky.js"></script>
</head>
<body>
<div id="container">
<section role="banner" id="main-bg">
<!-- this is where the full screen image will be -->
<img src="img/bg.jpg">
</section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="content">
<!-- content in here -->
</div>
</div>
</body>
</html>
提前谢谢
答案 0 :(得分:2)
你的CSS没有告诉它在哪里修复,只需将其改为
即可.sticky {
position: fixed;
top: 0;
}
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
&#13;
* {
margin: 0;
padding: 0;
font-family: "Helvetice Neue", sans-serif;
}
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/HelveticaNeue.otf");
}
html, body {
width: 100%;
height: 100%;
}
div#container {
width: 100%;
height: 100%;
}
div#content {
width: 100%;
height: 100%;
}
section#main-bg {
width: 100%;
height: 100%;
}
#main-bg img {
width: 100%;
height: 100%;
position: fixed;
z-index: -9999; /* always on bottom */
}
nav {
width: 100%;
height: 60px;
bottom: -60px;
background-color: #333333;
}
/* nav */ .sticky {
position: fixed; top: 0;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-left: 40px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
line-height: 60px;
}
div#content {
width: 100%;
height: 2000px;
background-color: #dedede;
bottom: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Josh Murray | My Personal Page</title>
<meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts/homemadeSticky.js"></script>
</head>
<body>
<div id="container">
<section role="banner" id="main-bg">
<!-- this is where the full screen image will be -->
<img src="img/bg.jpg">
</section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="content">
<!-- content in here -->
</div>
</div>
</body>
</html>
&#13;