我做了一個粘滯的導航欄,它將在啓動時位於視口的底部。我正在使用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/ - >這是你想實現什麼? –
是啊完美,謝謝你,所有的答案都在工作,但我說我不應該只是說「謝謝」!無論如何,每個解決方案都很棒 –