【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える

【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える
きのこさん
指定した場所で出したいのですよー
きのこさん
そして指定した場所で消したいのですねー

実装サンプル

See the Pen 【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える、実装サンプル by 125naroom (@125naroom) on CodePen.

HTML

<section>
  <div class="area">
    <div class="title">【jQuery】<br>スクロールして、指定した場所から出てきて、指定した場所で消える、実装サンプル</div>
    <p class="_a"><a href="https://125naroom.com/web/4582" target="_blank" class="link">View the note</a></p>
  </div>
  <div class="area" id="start">
    <div class="title">しかくが出てきますよ</div>
  </div>
  <div class="area">
    <div class="title">出てますね</div>
  </div>
  <div class="area" id="end">
    <div class="title">しかくが消えますよ</div>
  </div>
  <div class="area">
    <div class="title">消えてますね</div>
  </div>
</section>
 
<div class="sikaku_box">しかく</div>

CSS

.sikaku_box {
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: -1;
	transition: 0.3s;
}
.sikaku_box.fixed {
	opacity: 1;
	z-index: 9;
}

JavaScript

▽jQuery使用

$(function () {
  $(window).on('load scroll', function () { //スクロールするよ
    var scrollHeight = $(document).height(); //ページ上部からの距離を取得
    var scrollPosition = $(window).height() + $(window).scrollTop(); //Windowの高さを取得+スクロール位置を取得
    var startHeight = $("#start").innerHeight(); //場所指定(ここでは出てくる場所)
    var endHeight = $("#end").innerHeight(); //場所指定(ここでは消える場所)
    if (startHeight <= $(this).scrollTop()) { //スクロール距離が『#start』を超えたら
      $('.sikaku_box').addClass('fixed'); //fixedというclassを追加
      if (scrollHeight - scrollPosition <= endHeight) { //スクロール距離が『#end』を超えたら
        $('.sikaku_box').removeClass('fixed'); //fixedというclassを削除
      } else {
        $('.sikaku_box').addClass('fixed'); //fixedというclassを追加
      }
    } else {
      $('.sikaku_box').removeClass('fixed'); //fixedというclassを削除
    }
  });
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

きのこさん
あ、これこれ
きのこさん
めでたしめでたし

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

12

/

8

2024

Googleさんの
おすすめ

12

/

8

2024

デザインの記事

映画『ラストマイル』公式サイト
映画『パレード』
【jQuery】スライダープラグイン「slick」実装サンプル集