Javascript DOM HTML Element scrollTop Property toggle class on scroll positions

Introduction

Toggle between class names on different scroll positions.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.test {/*from   w w w .jav a 2 s.  com*/
  background-color: yellow;
}
</style>
</head>
<body style="height:1500px">

<p>Scroll down this page</p>

<p id="myP" style="position:fixed">this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. this is a test. </p>

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}
</script>

</body>
</html>



PreviousNext

Related