スタートアップ時にビューポートの下部に配置されるスティッキーなナビゲーションバーを作成しています。私はそれを配置するためにvh
ユニットを使用しています。ビューポートの高さが変更されると、ナビゲーションバーは意図したとおりに再配置されます。ただし、.offset().top
は旧式の位置を使用し続けます。その結果、スクリプトが不正な位置に貼り付くように切り替わります。サイズがjqueryのスティッキーヘッダー
var win = $(window),
header = $('nav'),
offset = (header.offset().top);
win.scroll(function() {
if (offset < win.scrollTop()) {
header.addClass("sticky");
} else {
header.removeClass("sticky");
}
});
#container {
margin: 0;
padding: 0;
}
#boxi {
z-index: -15;
height: 50vh;
background-color: green;
}
#boxi2 {
z-index: -15;
height: 1000px;
background-color: pink;
}
nav {
width: 100%;
position: absolute;
height: 50px;
top: 50vh;
transform: translate(0, -50px);
background-color: black;
opacity: 0.5;
color: white;
}
nav.sticky {
transform: translate(0, 0px);
position: fixed;
top: 0px;
right: 0px;
left: 0px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="container">
<div id="boxi"></div>
<nav>Sticky!</nav>
<div id="boxi2"></div>
</body>
https://jsfiddle.net/4whfz14j/6/ - >あなたが達成したい、これはありますか? –
ええ、完璧、ありがとう、すべての答えが働いているが、私はちょうど "ありがとう"と言うべきではないと言います!とにかくすべてのソリューションは素晴らしいです! –