当滚动到 slider 或页脚时,我想隐藏我的粘滞按钮。
我试过这段代码:
$(window).scroll(function() {
if ($(this).scrollTop() < 250) {
$("#sticky-button").css({
'display': 'none'
});
}
});
所以它的作用是在滚动高度低于 250 像素时隐藏我的粘性按钮。
但在移动设备上,我意识到它不起作用,因为 250px 在移动设备上是一个很大的高度。
那么如何通过使其在某个 div(如:#slider、#footer)上工作而不是设置 250 高度来做到这一点?
最佳答案
您应该使用 .offset().top
检查元素的位置
$(window).scroll(function() {
var elemOffsetTop = $('#slider').offset().top;
if ($(this).scrollTop() > elemOffsetTop ) {
$("#sticky-button").css({
'display': 'none'
});
}else{
$("#sticky-button").css({
'display': 'block'
});
}
});
#sticky-button{
position: fixed;
top:0;
left:0;
width: 100px;
height: 100px;
background-color: blue;
}
.section{
width: 100%;
height: 200px;
border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-button"></div>
<div class="section"></div>
<div class="section"></div>
<div id="slider" class="section">slider</div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
关于javascript - 如何在存在某个 div 时隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58743877/