您好,我想问一下document.body.scrollTop如果想改成获取html中与一个对象的高为100时再显示div应该怎么写呢
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {console.log(121);
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000 ) {
document.getElementById("backtoTop").style.display = "block";
document.getElementById("mobile-bottom-div").style.display = "flex";
} else {
document.getElementById("backtoTop").style.display = "none";
document.getElementById("mobile-bottom-div").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
script>
这是什么操作?看代码应该是滚动到一定高度后显示某个对象并且固定住导航吧?
如果这个高度是根据内容中的某个容器,这个容器滚动到顶部再执行none/block,可以获取容器的位置信息,根据位置信息来判断,类似吸顶效果
<style>
#backtoTop, #mobile-bottom-div{position:fixed;top:0;left:0}
#backtoTop{top:40px}
</style>
<div id="backtoTop" style="display:none">Top</div>
<div id="mobile-bottom-div" style="display:none">mobile-bottom-div</div>
<div style="height:300px">
Block1
</div>
<div style="height:1000px" id="realContent">
Block2,滚动头到这里显示backtoTop,mobile-bottom-div
</div>
<div style="height:1000px">
Block3
</div>
<script>
window.onscroll = function () { scrollFunction() };
function getTop(el) {
var t = el.offsetTop;
while (el = el.offsetParent) t += el.offsetTop;
return t;
}
function scrollFunction() {
var realContent = getTop(document.getElementById('realContent'));
if (document.body.scrollTop > realContent || document.documentElement.scrollTop > realContent) {
document.getElementById("backtoTop").style.display = "block";
document.getElementById("mobile-bottom-div").style.display = "flex";
} else {
document.getElementById("backtoTop").style.display = "none";
document.getElementById("mobile-bottom-div").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
使用class,获取原生dom,document.getelementbyclassname()