【jQuery】スクロール途中から追尾(fixed)、指定位置(class)で消える

【jQuery】スクロール途中から追尾(fixed)、指定位置(class)で消える

jQueryを使って、スクロールの途中から追尾(fixed)、そして、指定の位置(class)で消える、というのを実装してみたいと思います。

なんだか複雑だー
理解できれば意外と簡単ですー

実装サンプル

See the Pen 【jQuery】スクロール途中から追尾、指定位置(class)で消える、実装サンプル by 125naroom (@125naroom) on CodePen.

HTML

追尾(fixed)要素を『sikaku_box』というクラスを付けて実装してみました。

<div class="sikaku_box">しかく</div>
 
<div class="oneArea">
  <div class="one_title">まる</div>
</div>
 
<div class="end_box">しかくが消える</div>

▽流れ

  1. 『sikaku_box』を通過すると追尾(fixed)
  2. 『end_box』までスクロールすると『sikaku_box』が消える

CSS

必要なものだけ抜き出したCSSは以下になります。

.sikaku_box.fixed {
    position: fixed;
    top: 50px;
    left: auto;
    z-index: +1;
}
.sikaku_box.fixed.none {
    opacity: 0;
    z-index: -1;
}

JavaScript

▽jQuery使用

$(function(){
  var scrollStart = $('.sikaku_box').offset().top; //ページ上部からの距離を取得
  var scrollEnd = $('.end_box').offset().top; //ページ上部からの距離を取得
  var distance = 0;
 
  $(document).scroll(function(){
    distance = $(this).scrollTop(); //スクロールした距離を取得
 
    if (scrollStart <= distance) { //スクロール距離が『.sikaku_box』の位置を超えたら
      $('.sikaku_box').addClass('fixed'); //class『fixed』を追加
    } else if (scrollStart >= distance) { //スクロールがページ上部まで戻ったら
      $('.sikaku_box').removeClass('fixed'); //class『fixed』を削除
    }
 
    if (scrollEnd <= distance) { //スクロール距離が『.end_box』の位置を超えたら
      $('.sikaku_box').addClass('none'); //class『none』を追加
    } else{
      $('.sikaku_box').removeClass('none'); //『.end_box』より上部に戻ったらclass『none』を削除
    }
  });      
});


上記の15行目から19行目は、下記のように『fadeOut』、『fadeIn』でもオッケー。
※ちょっと動きを付けたい場合は上記のほうがおすすめです。

  if (scrollEnd <= distance) { //スクロール距離が『.end_box』の位置を超えたら
    $('.sikaku_box').fadeOut(); //フェードアウト
  } else{
    $('.sikaku_box').fadeIn(); //『.end_box』より上部に戻ったらフェードイン
  }
});      

メモ

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

さいごに

ふむふむ
Googleさんの自動広告をつけてる場合は消える位置がずれると思われますのでその際は調整をー

関連記事

Author

デザコト

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

Googleさんの
おすすめ

10

/

15

2024

Googleさんの
おすすめ

10

/

15

2024

デザインの記事

餃子そして焼味 巣王
ルックバック
【jQuery】スライダープラグイン「slick」実装サンプル集