How to change style of elements on scroll using jQuery ?

Last Updated : 11 Jun, 2020

We have given an HTML document containing some CSS properties, and the task is to change the CSS property to a particular element after scrolling the page using jQuery. To change the style of element on scroll, we get the number of pixels by which the content of an element has been scrolled horizontally or vertically.

The following example illustrates how to change the style of elements as they are scrolled. One way to change the style of elements as they get scrolled is to change the class to which the elements belong.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to change style of elements  
        on scroll using jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <style> 
        .classinitial { 
            height: 200px; 
            background-color: rgba(255, 255, 255, 0.5); 
            position: fixed; 
            top: 200; 
            width: 100%; 
            transition: all 0.5s; 
            background-clip: border-box; 
            border-width: 5px; 
            border-style: solid; 
        } 
  
        .classfinal { 
            height: 100px; 
            background-color: rgba(0, 0, 0, 0.8); 
            position: fixed; 
            top: 200; 
            width: 100%; 
            transition: all 0.5s; 
            border-width: 8px; 
            border-style: solid; 
        } 
  
        .wrapper { 
            height: 2000px; 
            padding-top: 200px; 
            color: green; 
            text-align: center; 
            font-size: larger; 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <header class="classinitial"></header> 
    <div class="wrapper"> 
        Geeks For Geeks 
    </div> 
  
    <script> 
        $(function () { 
            var header = $(".classinitial"); 
            $(window).scroll(function () { 
                var scroll = $(window).scrollTop(); 
  
                if (scroll >= 155) { 
                    header.removeClass('classinitial') 
                            .addClass("classfinal"); 
                } else { 
                    header.removeClass("classfinal") 
                            .addClass('classinitial'); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>

The above code adds style to both the initial class and final class (called classinitial and classfinal according to the code) with the help of CSS styling properties. Below is the JavaScript code that helps to change the class of the header element present in the html code.

The jQuery code flips the class of the header element from classinitial to classfinal if the page is vertically scrolled by 155 pixels. And it flips the class from classfinal to classinitial otherwise. For this purpose the jQuery methods addClass() and removeClass() are used in the above code. Here the scrollTop() function is used to get the number of pixels by which the element is scrolled and is it saved inside the variable named scroll.

Output: