我要疯了..我正试图获得粘性导航的效果,但是我有一个图像,一旦它到达窗口的顶部就应该固定在页面的顶部,然后以下元素只是滚动到该图像的顶部。那是我的代码:
基本的html是:
<section class="about">
...
</section>
<section>
<img src='' class="sticky">
<div> ...</div>
</section>
使用Javascript:
$(window).load(function() {
var sticky = $(".scroll");
var height = $("#about").height();
$(window).scroll(function() {
if($(this).scrollTop() > height ){
sticky.addClass("fix");
} else {
sticky.removeClass("fix");
}
});
})
它工作正常,除了 - 图像(“.sticky”)过早修复。我正在向下滚动,甚至在我的“约”部分移开之前,图像就会固定并跳到顶部。屏幕截图显示了它。与女孩在上面的大图像有“粘性”类 here's the screenshot
请帮忙
答案 0 :(得分:0)
您应该检查页面顶部的img
偏移量,而不是<section class="about">
的高度。
我用的不是图像,而是用来表示粘性&#39;应该实现。您还在代码段中未公开<section>
标记。
var offset = $('.sticky').offset().top;
$(window).on('scroll', function () {
if ($(document).scrollTop() > offset) {
$('.sticky').addClass('fix');
} else {
$('.sticky').removeClass('fix');
}
});
&#13;
.about {
height: 100vh;
width: 200px;
background: lightgreen;
}
.example {
background: lightblue;
height: 120vh;
width: 200px;
}
.sticky {
background: salmon;
width: 200px;
height: 100px;
}
.fix {
position: fixed;
top: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="about"></section>
<section class="example">
<div class="sticky">quasi img</div>
<div> ...</div>
</section>
&#13;