所以问题现在已经适应了内容部分,一旦它被“修复”,就不会确认导航栏.当你慢慢向下滚动时它可以看到这个(它跳过2-3行文字.)有什么建议吗？
这是我的代码：
function fixNav() {
/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];
/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;
/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;
/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}
/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');
}
}
/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);.banner,.sociallinks,.nav,.nav ul
{
max-width: 100%;
max-width: 100%;
}
.nav
{
font-family: 'Oswald', sans-serif; font-weight: 300;
}
html
{
background: #333;
background-attachment: fixed;
background-size: 50px;
}
body
{
margin: 0px auto;
text-align: center;
}
.banner
{
width: 700px;
margin: 10px auto 0px auto;
padding: 0px;
}
.sociallinks
{
width: 960px;
margin: 0px auto;
}
.sociallinks ul
{
list-style-type: none;
margin: 0px auto;
padding: 0px
}
.sociallinks ul li
{
display: inline-block;
padding: 0px 10px;
}
.sociallinks ul li img
{
-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
width: 30px;
height: 30px;
}
.nav
{
width: 100%;
margin: 0px auto;
background: #333;
padding: 1px 0px;
}
.nav ul
{
width: 100%;
list-style-type: none;
margin: 10px auto;
padding: 0px;
}
.nav ul li
{
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
}
.nav ul li a
{
width: 60px;
border-top-color: silver;
border-top-style: solid;
border-top-width: 1px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
}
.nav ul li a:hover:not(.active)
{
display: inline-block;
text-decoration: none;
color: #111;
border-top-color: #111;
}
.nav ul li a.active
{
border-top-color: #111;
color: rgba(0,0,0,0.8);
text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}
.fixed
{
background-color: #333;
position: fixed;
top: 0px;
padding: 0px;
margin: 0px 0px;
width: 100%;
z-index:0;
}
.content
{
position: relative;
background-color: rgba(0,0,0,0.1);
color: white;
width: 960px;
height: 1500px;
max-width: 95%;
max-width: 95%;
margin: 0px auto;
padding: 0px;
border: 0px;
z-index: -1;
overflow: hidden;
}
table
{
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>Broadbent</title>
</head>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<body>
<div class="banner">
<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
</div>
<div class="sociallinks">
<ul>
<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
</ul>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="content">
Main Section 1<br>Main Section 2<br>Main Section 3<br>Main Section 4<br>Main Section 5<br>Main Section 6
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>最佳答案 这是一个解决方案,只使用普通的vanilla javascript(而不是jQuery)：
function fixNav() {
/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];
/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;
/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;
/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}
/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');
}
}
/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);
这是完整的工作示例：
function fixNav() {
/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];
/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;
/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;
/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}
/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');
}
}
/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);#banner,#sociallinks,.nav,.nav ul
{
max-width: 100%;
max-width: 100%;
}
.nav
{
font-family: 'Oswald', sans-serif; font-weight: 300;
}
html
{
background: #333;
background-attachment: fixed;
background-size: 50px;
}
body
{
margin: 0px auto;
text-align: center;
}
.banner
{
width: 700px;
margin: 10px auto 0px auto;
padding: 0px;
}
.sociallinks
{
width: 960px;
margin: 0px auto;
}
.sociallinks ul
{
list-style-type: none;
margin: 0px auto;
padding: 0px
}
.sociallinks ul li
{
display: inline-block;
padding: 0px 10px;
}
.sociallinks ul li img
{
-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
width: 30px;
height: 30px;
}
.nav
{
z-index: 99;
width: 960px;
margin: 0px auto;
background-color: #333;
}
.nav ul
{
width: 100%;
list-style-type: none;
margin: 10px auto;
padding: 0px;
}
.nav ul li
{
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
}
.nav ul li a
{
width: 160px;
border-top-color: silver;
border-top-style: solid;
border-top-width: 1px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
}
.nav ul li a:hover:not(.active)
{
display: inline-block;
text-decoration: none;
color: #111;
border-top-color: #111;
}
.nav ul li a.active
{
border-top-color: #111;
color: rgba(0,0,0,0.8);
text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}
.fixed
{
position: fixed;
top: 0;
left: 50%;
margin-left:-480px;
}
.content
{
background-color: rgba(0,0,0,0.1);
width: 960px;
height: 1500px;
max-width: 90%;
max-width: 90%;
margin: 0px auto;
padding: 0px;
border: 0px;
}
table
{
width: 100%;
color: white;
} <div id="status"></div>
<div class="banner">
<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
</div>
<div class="sociallinks">
<ul>
<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
</ul>
</div>
<div class="nav">
<ul>
<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="content">
</div>