How to change style of elements on scroll using jQuery ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change style of elements 
        on scroll using jQuery?
    </title>
  
    <script src=
    </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>

chevron_right


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:

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.