[JavaScript]スクロールで表示させるボタンブロックをつくる

2023 1/26

2022/07/27 2023/01/26

スポンサードリンク

目的

スクロールして画面を下げていくと突然表示させるブロックを作りたい

対応

目標とする要素をgetElementById等で取得して、その要素の高さをgetBoundingClientRect()で取得。

console.logでスクロールしていくとどれくらいの高さになっているかわかるので、

目標値の高さがいくつ以上の数値になったときにCSSのdisplayで表示させる分岐を入れる。そのためCSSを読み込んだ時点では非表示にさせるdisplay:noneを書いておく。

 //該当部分通過したら表示
window.addEventListener("scroll",function (){
	const entryBtn = document.getElementById("entryWrap");
	const scrollBtn = document.getElementById("scrollBtn");
	const getTargetDistance = scrollBtn.getBoundingClientRect().top;
	//console.log(getTargetDistance);
	const scroll = window.pageYOffset;
	if ( getTargetDistance > 500) {
		entryBtn.style.display = 'none';
	} else {
		entryBtn.style.display = 'block';
		
	}
});

jQueryプラグインinview.jsを使う

jQueryのプラグイン「inview.js」を使うことでもトリガー検知できます。

GitHub – protonet/jquery.inview: A jQuery plugin that adds a bindable ‘inview’ event for detecting when an element is scrolled into view.

inview.jsは指定した要素がスクロールで表示されたときをif文に記述できるライブラリで、細かい動作を実行するときに便利。

記述も簡単なので運用しやすそうです。

参考：jQueryプラグインinview.jsで画面に表示されたタイミングでアニメーションを実行する｜ Gimmick log

animate.cssと合わせて使う。 [1]要素を通過を確認 [2]特定のアニメーションクラスをaddClassで追加してアニメーションを実行するという流れです。

 // class boxWrapを通過したら表示
 $('.boxWrap').on('inview', function(event, isInView) {
    if (isInView) {
     //　表示されたときの実行内容
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }

スポンサードリンク