Check scroll offset during scroll event - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:scroll

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. scroll

Description

Check scroll offset during scroll event

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(window).scroll(function() {/*  w  w  w  . ja v a 2  s. c o  m*/
    if ($(document).scrollTop() > 50) {
      $("p").addClass("test");
    } else {
      $("p").removeClass("test");
    }
  });
});
</script>
<style>
.test {
    background-color: yellow;
}
</style>
</head>
<body style="height:1550px;">

<p>Scroll down this page.</p>

<p 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.
<br/>
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.
<br/>
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.
<br/>
</p>

</body>
</html>

Related Tutorials