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.
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.