Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <style> .test { background-color: yellow; } </style> <body style="font-size:20px;height:1500px"> <h1>The onscroll Event</h1> <p id="myP" style="position:fixed"> If you scroll 50 pixels down from the top of this page, the class "test" is added to this paragraph. Scroll up again to remove the class.</p> <script> window.onscroll = function() {myFunction()}; function myFunction() { if (document.documentElement.scrollTop > 50) { document.getElementById("myP").className = "test"; } else { document.getElementById("myP").className = ""; } } </script> </body> </html>
