【jQuery】上スクロールで表示、下スクロールで非表示にする処理

こんにちは、Ryohei（@ityryohei）です！

上スクロールで表示されて、下スクロールで非表示になる処理の実装方法の紹介になります。

固定ナビゲーションや、スマホ表示時に画面下に表示されるメニュー等で利用されています。ページを下にスクロールするユーザーの多くはコンテンツに集中していますので、固定表示を非表示にして画面領域を広げる手法は、ユーザーに寄り添った良い方法だと思います。

具体的には下記のような表示となります。

See the Pen Upper Lower Scroll | jQuery + CSS by ryoy (@intotheprogram) on CodePen.

上記は、下にスクロールするとナビゲーションが非表示に、上にスクロールするとナビゲーションが表示される処理となります。

本記事では、上記デモの実装方法をご紹介しています。

本記事の内容

上スクロールで表示、下スクロールで非表示にする方法
表示・非表示の切り替えをアニメーションにする
一定量スクロールしてから非表示にする

では解説していきます。

上スクロールで表示、下スクロールで非表示にする処理

スクロール方向によって表示・非表示を切り替える場合は、下記のような処理の流れになるかと思います。

ユーザーのスクロール位置を取得する
スクロール方向を取得する
上・下スクロールを判断して処理する

上記の処理の流れをスクリプトにしてみます。

$(function(){
  //変数初期化
  var pos = 0;
  //スクロールが発生した際に実行
  $(window).on('scroll', function(){
    //ユーザーのスクロール位置取得　& スクロール方向で分岐
    if($(this).scrollTop() < pos ){
      //上スクロール時の処理を記述
    }else{
      //下スクロール時の処理を記述
    }
    //スクロールが停止した位置を保持
    pos = $(this).scrollTop();
  });

});

$(this).scrollTop()で現在のスクロール位置を取得、変数のposは停止したスクロール位置を保持しています。ifでスクロール位置と保持中のスクロール位置を比較し、スクロール方向を判断しています。

これで、スクロール方向によって別の処理ができるようになりました。続いて要素の表示・非表示の切り替えをアニメーションにしてみましょう。

アニメーションで表示・非表示が切り替える

アニメーションする方法は色々ありますが、本記事ではjQueryのslideDown、slideUpを使った方法と、CSSで定義したclassを付け外ししてアニメーションする方法をご紹介したいと思います。

例として、表示・非表示する要素はheaderとしています。

jQuery

$(function(){

  var pos = 0;
  var header = $('header');

  $(window).on('scroll', function(){
    if($(this).scrollTop() < pos ){
      //上スクロール時ヘッダー表示
      header.slideDown();
    }else{
      //下スクロール時ヘッダー非表示
      header.slideUp();
    }
    pos = $(this).scrollTop();
  });

});

See the Pen PymZdw by ryoy (@intotheprogram) on CodePen.

CSS + jQuery

.hideClass {
  transform: translateY(-60px);
}

$(function(){

  var pos = 0;
  var header = $('header');
  var hideClass = 'hideClass';

  $(window).on('scroll', function(){
    if($(this).scrollTop() < pos ){
      //上スクロール時ヘッダーのhideClassを削除
      header.removeClass(hideClass);
    }else{
      //下スクロール時ヘッダーにhideClassを追加
      header.addClass(hideClass);
    }
    pos = $(this).scrollTop();
  });

});

See the Pen Upper Lower Scroll | jQuery + CSS by ryoy (@intotheprogram) on CodePen.

CSSではtransitionやtransformを用いて様々なアニメーションをさせることができます。また、Animate.cssと組み合わせると表現の幅が広がりますので、色々と試していただければと思います。

一定量スクロールしてから非表示にする

最後に、一定量スクロールしてから非表示になるようにスクリプトを修正します。

例えば、キービジュアルを過ぎた後に非表示になるようにしたい！といった場面でお役に立つかと思います。

$(function(){

  var pos = 0;

  $(window).on('scroll', function(){
    //
    if($(this).scrollTop() < pos || $(this).scrollTop() < 500){
      //上スクロール時の処理を記述
    }else{
      //下スクロール時の処理を記述
    }
    //スクロールが停止した位置を保持
    pos = $(this).scrollTop();
  });

});

See the Pen Upper Lower Scroll | jQuery + CSS 2 by ryoy (@intotheprogram) on CodePen.