ウィンドウに要素が表示された時に処理を行う[jQuery]

jQueryですが、要素がウィンドウ内に表示された時のイベントを追加できます。
色々、応用できてとても便利だったので紹介します。

jQueryのプラグイン：jquery.inview

github jquery.inview

使い方はとても簡単です。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../jquery.inview.min.js" />

・・・

// code
$(function() {
  $('.inview').on('inview', function(event, isInView) {
    if (isInView) {
        // element is now visible in the viewport
    } else {
        // element has gone out of viewport
    }
  });
});

上記例だと、classinviewが指定されている要素が画面内に表示された時にイベントが発生します。簡潔に下記のように書いてもOKです。

$('.inview').on('inview', function(){
        $(this).addClass('active');
});

 
上記例は、表示された要素に、classactiveを追加しています。
表示された時にアニメーションさせたり、色々な使い道があり便利です。

jQueryおすすめの書籍

jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
公式を見るのが一番良いかもしれません。
jQuery公式

jQuery最高の教科書
基本から応用まで。

Tweet