【jQuery】要素が画面から出たら処理を実行 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

ヘッダー要素が画面外に出たらヘッダー要素を固定、画面内に入ってきたら元に戻す動作を実装したときのメモ。
こちらのサイトで紹介されていた方法で実装しました。

[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する

HTMLの要素はこんな感じ

<header>
      <div class="header-contents">
        <div class="container">
<!-- ここは要素 -->
        </div><!--/.container-->
      </div><!--/.header-contents-->
    </header>

jQueryですが、モバイルデバイスでこの動作は不要ということで、PC以外では動作しないようにしています。
クラスheader-fixにはposition:fixed;が設定してあるので、画面外に出たらheader-contents内の要素は固定化され、画面内に戻ってきたら固定化が解除されます。

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  
  <script>
  //PC以外は無効
  if(!navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)){
    $(function(){
      var scroll;
      var objH = $('header').outerHeight();
      var objTop = $('header').offset().top;
      var objBottom = objTop + objH;
      $(window).on('scroll', function(){
        scroll = $(window).scrollTop();
        if(scroll >= objBottom){
          //要素が画面外に出たら処理
          $('.header-contents').addClass('header-fix');    
        } else {
          //要素が画面内に入ってきたら処理
          $('.header-contents').removeClass('header-fix');    
        }
      });
    });
  }
  </script>

今回もとりあえず要件は満たしたのでこれでよしとします。