1500(ピクセル?)下にスクロールすると、下部の絶対divが消え、上にスクロールすると(スクロールトップが1500未満に戻る)再び表示されるようにしようとしています。
理由はわかりませんが、スクロールトップが1500を超えると、divがランダムに点滅するようです。消えて、範囲内に戻ると再び表示されます。
エフェクトが誤動作するのはなぜですか?それをなしに表示するクラスに切り替えるだけであるはずです。助けてくれてありがとう。
window.onscroll = function() {if ((window.innerHeight + window.scrollY) >= 1500) {document.getElementById('test').classList.toggle("customstyle")}};
body {
height: 2000px;
background: #ccc;
}
.customstyle {display: none}
<body>
<div id="test" style="
position: fixed;
bottom: 0;
background: red;
left: 0;
padding: 20px;
width: 100%;
text-align: center;
">text</div>
</body>
クラスを切り替えているため(したがって、1500ピクセルを超えるとスクロールイベントが呼び出されるたびにクラスを追加および削除します)、1500ピクセルを超えたときにクラスを追加し、1500ピクセルを下回ったときにクラスを削除する必要があります。
window.onscroll = function() {
if ((window.innerHeight + window.scrollY) >= 1500) {
document.getElementById('test').classList.add("customstyle");
} else {
document.getElementById('test').classList.remove("customstyle");
}
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加