Javascript показать / скрыть элементы при прокрутке вверх и вниз в пределах указанного диапазона на странице - PullRequest
Новая
       24

Javascript показать / скрыть элементы при прокрутке вверх и вниз в пределах указанного диапазона на странице

0 голосов
/ 07 ноября 2019

Я пытаюсь сделать элементы

видимыми / скрытыми при прокрутке вверх и вниз по области просмотра с помощью vanilla JS.

Я пытался использовать переключатель и функцию, используя: window pageYOffset body body. scrollTop onscroll, ни один из которых не дал мне желаемого результата. 

const introText = document.querySelector('.intro-text').children;
    window.onscroll = function(){ 
    if (window.pageYOffset < 200) {
        introText[0].style.opacity = '1';
        introText[1].style.opacity = '0';
    }
    else if(window.pageYOffset > 200 || window.pageYOffset < 400){
        introText[0].style.opacity = '0';
        introText[1].style.opacity = '1';
    }
    else if(window.pageYOffset > 400 || window.pageYOffset < 600){
        introText[0].style.opacity = '0';
        introText[1].style.opacity = '0';
        introText[2].style.opacity = '1';
    }
    else if(window.pageYOffset > 600 || window.pageYOffset < 800){
        introText[0].style.opacity = '0';
        introText[1].style.opacity = '0';
        introText[2].style.opacity = '0';
        introText[3].style.opacity = '1';
    }
    else if(window.pageYOffset > 800 || window.pageYOffset < 1000){
        introText[0].style.opacity = '0';
        introText[1].style.opacity = '0';
        introText[2].style.opacity = '0';
        introText[3].style.opacity = '0';
        introText[4].style.opacity = '1';
    }};
div.body {
    height: 2000px;
}

div.intro-text p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    margin: 0;
    padding: 0 1rem;
    opacity: 0;
}
<div class="body">
  <div class="intro-text">
    <p>text 1</p>
    <p>text 2</p>
    <p>text 3</p>
    <p>text 4</p>
    <p>text 5</p>  
   </div>
 </div>

Я бы хотел, чтобы элементы были видны в заданных параметрах: элемент 1 - первый 200 пикселей, элемент 2 - 200-400 пикселей сверхуи т. д.

приведенный выше код, по-видимому, выполняет только 1-й и 2-й элемент.

Я бы хотел, чтобы элементы были видны в заданных параметрах: элемент 1 - первый элемент 200 px 2 - элемент 200-400 пикселей сверху и т. Д.

приведенный выше код, по-видимому, выполняет только 1-й и 2-й элемент.

...