効率の良いコードが書けず悩んでいます。
現在の実装内容
①window.addEventListener('scroll', でスクロールを検知
②可視範囲に入ったらアニメーションさせたいオブジェクトに.activeクラスを付与、アニメーションが実行される
③リロード時は$('html,body').animate({ scrollTop: 0 }, '1');でページトップへ
この実装方法だと、例えばページの中間でリロードした場合③が実行されますがその際に意図せず①が実行されてしまい、要はページをリロードしたのにページ中間までのアニメーションはすでに実行後の状態で表示されています。
もちろん力技で③→①→②→removeClass('active')のようにすれば希望の形にはなりますが付与して削除してなんだかなぁと思います、、
そもそもの現状の実装方法が悪いのでしょうか。
お力をお貸しください。よろしくお願いします。
追記(コード例)
lang
1<div id="a" class="fade-in">〜</div>
lang
1#a{ 2 opacity: 0; 3 transition: opacity 1s ease; 4 &.active{ 5 opacity: 1; 6 } 7}
jquery
1$(function(){ 2 // リロード時ページトップへ 3 $('html,body').animate({ scrollTop: 0 }, '1'); 4}); 5 6$(window).on('load', function(){ 7 // スクロールイベント 8 window.addEventListener('scroll', function(e){ 9 // まだactiveになってない要素に対して 10 $('.fade-in').not('.active').each(function(){ 11 12 var pos = $(this).offset().top; 13 var scrollPos = $(window).scrollTop(); 14 var wh = $(window).height(); 15 16 // 任意の位置までスクロールしたらactiveクラスを付与 17 if (scrollPos > pos - wh + wh/5){ 18 $(this).addClass('active'); 19 } 20 }); 21 }); 22}