2022/09/13 2022/09/12

【jQuery】スクロールして特定のエリアに入ったら要素を出現させる方法

スクロールして特定のエリアに入ったら要素を出現させる方法

今回はある特定のエリアまでスクロールしたら、このようなボタンが出現する仕様ものを実装します。

「ファーストビューでは表示させたくないけれど、それ以外では表示させたい」などという時などに使えます。

画面下部にスティッキーするボタンとトップへ戻るボタン
画面下部にスティッキーするボタンとトップへ戻るボタン

HTML

今回は画面下部にスティッキーするボタンと、トップへ戻るボタンを作成。

    <div id="stickyBtn" class="stickyBtn_box none">
      <a href="#" class="stickyBtn -type4">お問い合わせ</a>
      <a href="#" class="stickyBtn -type5">資料ダウンロード</a>
    </div>
    <a href="#" class="btn-top none"></a>

CSS(SCSS)

CSS(scss)は参考程度に。

// sticky btn
.stickyBtn_box {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;

  @include g.sp {
    justify-content: space-around;
    height: 3.125rem;
  }

  &.none {
    bottom: -100%;
  }

  .stickyBtn {
    color: #fff;
    font-weight: bold;
    text-align: center;

    &.-type4 {
      background: linear-gradient(-81deg, #143B6E, #3D76EA);
      display: inline-block;
      position: relative;
      font-size: 24px;
      width: 426px;
      height: 80px;
      line-height: 80px;

      @include g.pc {
        margin-right: 55px;
      }

      @include g.sp {
        font-size: 0.75rem;
        width: 8.4375rem;
        height: 2.5rem;
        line-height: 2.5rem;
      }

      &::after {
        position: absolute;
        top: 0;
        right: 10%;
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        color: #fff;
        font-weight: 700;
        font-size: 24px;

        @include g.sp {
          font-size: 0.75rem;
        }
      }
    }

    &.-type5 {
      background: linear-gradient(-83deg, #146E62, #30CB30);
      display: inline-block;
      font-size: 24px;
      width: 426px;
      height: 80px;
      line-height: 80px;
      position: relative;

      @include g.sp {
        width: 12.0625rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.75rem;
      }

      &::after {
        position: absolute;
        top: 0;
        right: 10%;
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        color: #fff;
        font-weight: 700;
        font-size: 24px;

        @include g.sp {
          font-size: 0.75rem;
        }
      }
    }
  }
}

// top button
.btn-top {
  position: fixed;
  bottom: 13%;
  right: 8%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: #16408F;

  &.none {
    bottom: -100%;
  }

  @include g.sp {
    width: 3.125rem;
    height: 3.125rem;
    bottom: 23%;
  }
}

.btn-top::before {
  font-family: "Font Awesome 5 Free";
  content: '\f106';
  color: #fff;
  font-size: 32px;
  font-weight: 700;

  @include g.sp {
    font-size: 2rem;
  }
}
  &.none {
    bottom: -100%;
  }

２つのボタンとも、初期状態（ファーストビュー）では表示させたくないので、クラスに「none」が付与して画面上からは見えない状態にしておきます。

JavaScript

//スクロール途中からヘッダーを出現させるための設定を関数でまとめる
$(function () {
  $(window).on('load scroll', function () {
    var elemTop = $('#area').offset().top;//#areaの位置まできたら
    var scroll = $(window).scrollTop();
    if (scroll >= elemTop) {
      $('#stickyBtn').removeClass('none');//#stickyBtnについているnoneというクラス名を除く
      $('.btn-top').removeClass('none');//#stickyBtnについているnoneというクラス名を除く
    } else {
      $('#stickyBtn').addClass('none');//#stickyBtnについているnoneというクラス名を付与
      $('.btn-top').addClass('none');//#stickyBtnについているnoneというクラス名を付与
    }
  });
});

「#area」のidが付与されているセクションまでスクロールすると、クラス「none」が除去され画面上に出現される仕組みになってます。

READ MORE IN BLOGS