「画面内に来たらクラス付与」のコードを書きました。↓
js
1$(window).scroll(function (){ 2 $(".slide-img").each(function(){ 3 var hit = $(this).offset().top; 4 var scroll = $(window).scrollTop(); 5 var wHeight = $(window).height(); 6 7 if (scroll > hit - wHeight + wHeight/100){ 8 $(this).addClass("run"); 9 } 10 }); 11});
css
1.slide-img { 2 display: none; 3} 4.slide-img.run { 5 display: block; 6}
このコードはスクロールされて画面内に来たら.slide-imgに.runを追加するコードですが、
この.slide-imgの要素が最初から画面に映っていてもrunが追加されておらず、必ずスクロールしないとrunが追加されません。
スクロールイベントなので、分かりきったことですが、いざ実装となると、ページを開いた人が初めにページに要素がなくて戸惑うかもしれません。
そこで、画面の中に表示されていたらクラス付与という形にしたいのです。
稚拙な文章で申し訳ありません。
有識者の方、どうか知恵をよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/31 00:06
2021/09/09 07:30