0
位置を固定に変更したときに、Navの浮動が表示されるのはなぜですか？どうすればその問題を解決し、それを中心に保つことができますか？
$(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ではないようです。前もって感謝します！
：固定;'は、 '、'、あなたのウィンドウでそれを配置するright'または 'bottom'をleft'を' top'を与える必要があります。 –