スクロールの途中から追尾して指定した位置で消える要素を設置する方法

スクロールの途中から追尾して指定した位置で消える要素を設置する方法

スクロールの途中から追尾して指定した位置で消える要素を設置する方法

スクロールの途中からついてきて、特定の位置まできたらフェードアウトする要素を設置する方法をご紹介いたします。

挙動については、文字で説明するのは難しいので、以下のデモページをご参照いただければと思います。

デモページを見る

スクロールの途中から追尾して指定した位置で消える要素を設置する方法

まず、追尾させたい要素にstartというクラスを追加しておきます。

<div class="start">
 <img src="neko.png" alt="">
</div>

次に、要素を消したい場所でendというクラスを追加します。

<div class="end">ここを過ぎたら消えます</div>

CSSには要素を固定するための記述を追加しておきます。fixedというクラスを追加するので、以下のように指定します。


.fixed{
 position: fixed;
 top: 0;
}

</body>の直前に以下のスクリプトを追加したら完成です。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var scrollStart = $('.start').offset().top; //ページ上部からの距離を取得
var scrollEnd = $('.end').offset().top; //ページ上部からの距離を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
var distance = 0;

$(document).scroll(function(){
 distance = $(this).scrollTop(); //スクロールした距離を取得

 if (scrollStart <= distance) { //スクロール距離がstartの位置を超えたら
 $('.start').addClass('fixed'); //fixedというclassを追加
 } else if (scrollStart >= distance) { //スクロールがページ上部まで戻ったら
 $('.start').removeClass('fixed'); //classを削除
 }

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

jQueryも必要なので、1行目で読み込んでいます。

コメントも付けていますが、「var scrollStart = $(‘.start’).offset().top;」で要素の位置を取得して、「distance = $(this).scrollTop();」でスクロール量を取得しています。

これらの値を比較することで条件分岐し、fixedというクラスを追加したり、削除したりしています。

後半の17~21行目で、endを過ぎた時に要素をフェードアウトする処理を記述しています。逆にendよりも上にスクロールした時は、再び要素をフェードインしています。

「var windowHeight = $(window).height();」はウインドウの高さを取得しているのですが、条件にウインドウの高さを追加することで、要素が消える位置を微調整しています。

上記では「ウインドウの高さ÷2」をプラスしていますが、プラスするのは固定値でも構いません。その場合、条件分岐を「if (scrollEnd <= distance + 200)」のようにします。

あとがき

途中で要素を消さずに、ずっと追尾するようにしたい場合は、スクリプトの17~21行目を削除します。

スクロール量を取得して条件分岐に使う手法は、色々と応用が利きますのでぜひアレンジを加えてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です