Сделать элемент видимым при прокрутке - PullRequest
Новая
       24

Сделать элемент видимым при прокрутке

0 голосов
/ 18 октября 2018

Я не совсем понимаю, как сделать элемент видимым при прокрутке пользователем, вот мой код: 

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>

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Попробуйте, я сделал несколько изменений в вашем фрагменте кода

  • добавлено событие onscroll
  • Изменено grantpub.style.visibility = 'visible';to benepub.style.visibility = 'наследовать'; 

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>
0 голосов
/ 18 октября 2018

Вам нужно будет изменить несколько вещей, во-первых, вам нужен обработчик событий onscroll, чтобы вы могли проверить, когда пользователь прокручивает окно. 

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>

Также обратите внимание, что я получаю scrollTop из documentElement, который является тегом <html>, а не телом, посколькувозвращает 0.

...