滚动时使元素可见

Question

我对如何在用户滚动时使元素可见感到困惑，这是我的代码：

var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');

if (document.body.scrollTop > benefitpub.getBoundingClientRect().top + 'px') {
    benefitpub.style.visibility = 'visible';
}
if (document.body.scrollTop > advbox2.getBoundingClientRect().top + 'px') {
    advbox2.style.visibility = 'visible';
}

#advbox, #pubbox{
    margin-top: 500px;
    visibility: hidden;
}

<div id="advbox">
    Hello This is advbox
</div>

<div id="pubbox">
    Hello this is Pubbox
</div>

Answer 1

您需要更改一些内容，首先，您需要一个 onscroll 事件处理程序，以便您可以检查用户何时滚动 window。

var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');

window.onscroll = function () {
    if (document.documentElement.scrollTop > benefitpub.getBoundingClientRect().top) {
        benefitpub.style.visibility = 'visible';
    } else {
     benefitpub.style.visibility = 'hidden';
    }
    if (document.documentElement.scrollTop > advbox2.getBoundingClientRect().top) {
        advbox2.style.visibility = 'visible';
    } else {
     advbox2.style.visibility = 'hidden';
    }
}

#advbox, #pubbox{
    margin-top: 500px;
    visibility: hidden;
}

<div id="advbox">
    Hello This is advbox
</div>

<div id="pubbox">
    Hello this is Pubbox
</div>

此外，请注意，我得到的是 documentElement 的 scrollTop，它是 <html> 标签，而不是正文，因为 returns 0 .

Answer 2

试试这个，我对你的代码片段做了一些改动

已添加 onscroll 事件
已更改 benefitpub.style.visibility = 'visible'；到 benefitpub.style.visibility = 'inherit';

var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');

window.addEventListener('scroll', function(e) {
    if (document.body.scrollTop > benefitpub.getBoundingClientRect().top - 200) {
        benefitpub.style.visibility = 'inherit';
    }
    if (document.body.scrollTop > advbox2.getBoundingClientRect().top - 200) {
        advbox2.style.visibility = 'inherit';
    }
});

#advbox, #pubbox,#pubbox1{
    margin-top: 500px;
    visibility: hidden;
}

<div id="advbox">
    Hello This is advbox
</div>

<div id="pubbox">
    Hello this is Pubbox
</div>

<div id="pubbox1">
    Hello this is Pubbox
</div>

滚动时使元素可见

Make the element visible when scrolled

html

javascript

css

scroll

visibility