$(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>关于javascript - 当我将位置更改为固定时，为什么我的导航向左浮动？如何解决该问题并使其居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42795043/