前提・実現したいこと
スクロール時に、複数ある特定クラス(クラス名 : slide__hidden)の親要素に新しい要素を追加し、
その後、その特定要素のクラスを削除するようにしたいと考えています。
該当ソースだと、スクロール時に現れる1つ目の親要素に追加され、
2つ目の要素のクラスが削除されてしまいます。ご教授願えないでしょうか。
該当のソースコード html
<section class="container__section01"> <div class="inner"> <h3 class="slide__txt"> <span class="slide__hidden">hidden</span> </h3> </div> </section> <section class="container__section02"> <div class="inner"> <h3 class="slide__txt"> <span class="slide__hidden">hidden</span> </h3> </div> </section>
該当のソースコード Javascript
function slide__txt() { var sl__h = document.querySelectorAll('.slide__hidden'); for (var i = 0; i < sl__h.length; i++) { var rect = sl__h[i].getBoundingClientRect(), sl__b = sl__h[i].parentNode, scroll__b = document.documentElement || document.body.parentNode || document.body; if(rect.bottom < scroll__b.clientHeight) { if(!trigger) { trigger = true, sl__b.innerHTML += '<div class="slide__move"></div>', setTimeout(function() { sl__h[i].classList.remove('slide__hidden'); }, 300) } } } } window.onscroll = function() { slide__txt(); }
回答1件
あなたの回答
tips
プレビュー