JavaScript

[JavaScript]スクロールしたあとに特定の場所をすぎると表示させるボタン

スポンサードリンク
スポンサードリンク

目的

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

対応

目標とする要素を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';
		
	}
});

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-, ,

© 2022 さくらいらぼWEB制作版