スクロールの途中からついてきて、特定の位置まできたらフェードアウトする要素を設置する方法をご紹介いたします。
挙動については、文字で説明するのは難しいので、以下のデモページをご参照いただければと思います。
スクロールの途中から追尾して指定した位置で消える要素を設置する方法
まず、追尾させたい要素に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行目を削除します。
スクロール量を取得して条件分岐に使う手法は、色々と応用が利きますのでぜひアレンジを加えてみてください。