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.
- Hide scroll bar, but while still being able to scroll using CSS
- How to change cursor style using jQuery ?
- How to detect and change the content/style of a div using jQuery ?
- How to scroll automatically to the Bottom of the Page using jQuery?
- How to scroll window using jQuery ?
- How to scroll automatically to a particular element using JQuery?
- How to scroll the page up or down using anchor element in jQuery ?
- How to scroll to specific element using jQuery ?
- jQuery | scroll() with Examples
- How to determine the direction of a jQuery scroll event?
- How to change the style of alert box using CSS ?
- How to change the font style of a text canvas using Fabric.js ?
- How to change corner style of a canvas-type text using Fabric.js ?
- How to change selected value of a drop-down list using jQuery?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.