我想弄清楚如何在滚动特定的 div 时在显示和隐藏固定位置的元素之间切换。
这是我想要完成的图表:
到目前为止,当另一个 div (#div3
) 在窗口中可见时,我已经能够隐藏 #div2
,(如提供的代码片段所示) ,但我希望它在到达 #div1
的滚动顶部位置之前也被隐藏。
或者,我想一个更理想的解决方案是将 div 指定为仅在 #div1
的顶部和底部滚动点参数内切换显示。
有什么建议吗?
$(document).ready(function() {
var $window = $(window);
var div2 = $('#div2');
var div1 = $('#div1');
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
console.log(div1_bottom);
$window.on('scroll', function() {
var scrollTop = $window.scrollTop();
var viewport_height = $(window).height();
var scrollTop_bottom = scrollTop + viewport_height;
div2.toggleClass('hide', scrollTop_bottom > div1_bottom);
});
});
body {
background: #ccffcc;
padding: 0;
margin: 0;
border: 0;
text-align: center;
}
#div1 {
background: #0099ff;
height: 1500px;
color: #fff;
}
#div2 {
width: 100px;
height: 100px;
text-align: center;
position: fixed;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #ffff00;
color: #000;
}
#div2.hide {
display: none;
}
#div3 {
height: 100px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
Scroll area <b>before</b> arriving to the top of <b>div1</b>
<br>
<i>(Scrolling through this area <u>should not</u> display <b>div2</b>)</i>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div1">
<div id="div2">This is <b>div2</b></div>
This is <b>div1</b>
<br>
<i>(Toggle show/hide <b>div2</b> when scrolling past the top of this element)</i>
</div>
<div id="div3">
This is <b>div3</b>
<br>
<i>(Toggle show/hide <b>div2</b> every time this div becomes visible in the window)</i>
</div>
最佳答案
我修改了您的 scroll
处理程序。您只需要第二个条件,将视口(viewport)高度添加到当前 scrollTop
以进行底部检查。
此外,使用 document.documentElement.scrollTop
效果更好相反。
最后,我将您的.hide
更改为.show
并以display: none
开始#div2
.您的切换现在使用此类。
$(document).ready(function() {
var $window = $(window);
var div2 = $('#div2');
var div1 = $('#div1');
var div1_top = div1.offset().top;
var div1_height = div1.height();
var div1_bottom = div1_top + div1_height;
console.log(div1_bottom);
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
div2.toggleClass('show', scrollTop > div1_top && (scrollTop + window.innerHeight) < div1_bottom);
});
});
body {
background: #ccffcc;
padding: 0;
margin: 0;
border: 0;
text-align: center;
}
#div1 {
background: #0099ff;
height: 1500px;
color: #fff;
}
#div2 {
width: 100px;
height: 100px;
text-align: center;
position: fixed;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #ffff00;
color: #000;
display: none;
}
#div2.show {
display: block;
}
#div3 {
height: 100px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
Scroll area <b>before</b> arriving to the top of <b>div1</b>
<br>
<i>(Scrolling through this area <u>should not</u> display <b>div2</b>)</i>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div1">
<div id="div2">This is <b>div2</b></div>
This is <b>div1</b>
<br>
<i>(Toggle show/hide <b>div2</b> when scrolling past the top of this element)</i>
</div>
<div id="div3">
This is <b>div3</b>
<br>
<i>(Toggle show/hide <b>div2</b> every time this div becomes visible in the window)</i>
</div>
关于javascript - 如何在滚动特定的 div 时切换显示/隐藏固定元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50672173/