jQueryを使って、スクロールの途中から追尾(fixed)、そして、指定の位置(class)で消える、というのを実装してみたいと思います。
![](https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png)
![](https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_megane.png)
実装サンプル
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>
▽流れ
- 『sikaku_box』を通過すると追尾(fixed)
- 『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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
![](https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png)
![](https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_megane.png)