Как для тега h1 с классом title добавить класс animate, анимация которого будет появляться, если будет отображаться класс activ в теге section

217

10 февраля 2018, 22:55

Установлен плагин OnePageScroll (Сылка внизу), который тегу section добавляет класс activ. Как к тегу h1 с классом title добавить класс animate, анимация которого будет появляться, когда будет отображаться класс activ в теге section.

<div class="main">
    <section class="section">
        <h1 class="title">Hello world</h1>
    </section>
    <section>
        <h1 class="title">Hello world</h1>
    </section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="onepagescroll.js"></script>
<script src="main.js"></script>

http://www.thepetedesign.com/demos/purejs_onepage_scroll_demo.html

Answer 1

var h1 = document.querySelector('h1'); 
document.addEventListener('scroll', function() { 
  if (window.pageYOffset >= 100) { 
    h1.classList.add('animate') 
  } else { 
    h1.classList.remove('animate') 
  } 
})

body { 
  height: 1000px; 
  position:relative; 
} 
 
h1 { 
  position: sticky; 
  top:0; 
  background: red; 
} 
 
h1.animate { 
  background: green; 
}