After a couple of years using the wp247 Body Classes plugin, I’ve added a new feature that I couldn’t find anywhere else. It started out just wanting to know whether or not the page content had been scrolled. It ended up being so much more.
The wp247 Body Classes plugin can now provide multiple Scroll classes that can be added to the body tag depending on how the parameters are set. It can be as simple as the visible content is at the top of the page (is-scroll-top) and the visible content is not at the top of the page (is-not-scroll-top) to as complex as the visible content is 13 pixels from the top of the page or the visible content is more than 5% of the viewport height from the top of the page.
Scroll Classes Settings
General Settings
The general scroll settings simple indicate that the content is/is-not scrolling or the content is/is-not at the top of the page. The general scroll classes are:
- is-scroll-top
- indicates the top of the document is at the top of the page
- is-not-scroll-top
- indicates the top of the document is not at the top of the page
- is-scroll
- indicates the content has scrolled (a synonym for is-not-scroll-top)
- is-not-scroll
- indicates the content has hot scrolled (a synonym for is-scroll-top)
Scroll By Pixel Settings
The Scroll by Pixel settings allow you to be as granular as you want with scroll measurement. You can measure as little as 1 pixel difference in scrolling.
Parameters
- Scroll Increment (in pixels)
- how many pixels between changing the class?
- Scroll Start (in pixels)
- how many pixels before we start indicating that we are no longer at the top of the document.
- Scroll Limit (in pixels)
- how many pixels before we stop measuring and indicate that the limit has been reached.
Generated Body Classes
Scroll By Pixel is activated by selecting one or more of the following body classes to be set. All Scroll By Pixel classes end with a -px suffix.
- is-scroll-top-px
- indicates that the content has scrolled less than the Scroll by Pixels Start value from the top of the screen
- is-scroll-mid-px
- indicates that the document has scrolled between the Scroll by Pixels Scroll Start and Scroll Limit values
- is-scroll-#-px
- where # is the number of pixels, indicates the number of pixels the content has scrolled
- is-scroll-max-px
- indicates that the Scroll by Pixels Limit has been reached
Scroll By Viewport Height Settings
The Scroll by Viewport Height settings allow you to set scroll classes based on a percentage of the viewport height.
Parameters
- Scroll Increment (in percentage of viewport height)
- what percent of the viewport height must be scrolled between changing the class?
- Scroll Start (in percentage of viewport height)
- what percent of the viewport height must be reached before we start indicating that we are no longer at the top of the document.
- Scroll Limit (in percentage of viewport height)
- what percentage of the viewport height must the content be scrolled before we stop measuring and indicate that the limit has been reached.
Generated Body Classes
Scroll By Viewport Height is activated by selecting one or more of the following body classes to be set. All Scroll By Viewport Height classes end with a -vh suffix.
- is-scroll-top-vh
- indicates that the visible content is less than the Scroll by Viewport Height Start percent of the viewport height from the top of the screen
- is-scroll-mid-vh
- indicates that the document has scrolled between the Scroll by Viewport Height Scroll Start and Scroll Limit values
- is-scroll-#-vh
- where # is the percent of the viewport height, indicates the percent of the viewport’s height the content has scrolled
- is-scroll-max-vh
- indicates that the Scroll by Viewport Height Limit has been reached
Scroll By Document Height Settings
The Scroll by Document Height settings allow you to set scroll classes based on a percentage of the document height.
Parameters
- Scroll Increment (in percentage of document height)
- what percent of the document height must be scrolled between changing the class?
- Scroll Start (in percentage of document height)
- what percent of the document height must be reached before we start indicating that we are no longer at the top of the document.
- Scroll Limit (in percentage of document height)
- what percentage of the document height must the content be scrolled before we stop measuring and indicate that the limit has been reached.
Generated Body Classes
Scroll By Document Height is activated by selecting one or more of the following body classes to be set. All Scroll By Document Height classes end with a -dh suffix.
- is-scroll-top-dh
- indicates that the visible content is less than the Scroll by Document Height Start percent of the document height from the top of the screen
- is-scroll-mid-dh
- indicates that the document has scrolled between the Scroll by Document Height Scroll Start and Scroll Limit values
- is-scroll-#-dh
- where # is the percent of the document height, indicates the percent of the document’s height the content has scrolled
- is-scroll-max-dh
- indicates that the Scroll by Document Height Limit has been reached
Conclusion
The new wp247 Body Classes Scroll Classes can be used to enhance your visitor’s browsing experience. Want to see it in action? Check out the header of this page as you scroll. Try scrolling with your keyboard. Try scrolling with your mouse scroll wheel. Try it by clicking the scroll bar buttons. Try it by slowly dragging the scroll bar. Pretty cool, huh? Want to see how it’s done? Check out this article on Creating a Dynamically Shrinking Sticky Header in WordPress Based on Scrolling.