In this article, we are going to show how to create a dynamically shrinking sticky header in WordPress based on how far the user has scrolled down the page using the wp247 Body Classes plugin’s new Scroll Classes as described in wp247 Body Classes 2.0.
First of all, what are we talking about? Well, check out the header of this page as you scroll down. It shrinks as you scroll down the page and grows as you scroll back. Here’s how we did it.
Step 1: Install wp247 Body Classes
In our site’s WordPress backend:
- Go to Plugins->Add New
- Search for the plugin ‘wp247 Body Classes’
- Click the “Install” button
- Click on “Activate”
Step 2: Set the wp247 Body Classes Scroll by Pixel Settings
Again, in our site’s WordPress backend:
- Go to Settings->Body Classes
- Click on the Scroll Classes tab
- In the Scroll by Pixels section:
- Click on is-scroll-mid-px
- Click on is-scroll-##-px
- Click on is-scroll-top-px
- Set the Scroll Increment to 5
- Set the Scroll Start to 30
- Set the Scroll Limit to 200
- Click the Save Changes button at the bottom of the page
Step 3: Set the Styling for the header
And again, in our WordPress backend:
- Go to Settings->Body Classes
- Click on the Custom CSS tab
- Entered the following CSS in the CSS Textarea:
[get-wp247-body-class-custom-css]
- Click the Save Changes button at the bottom of the page
Step 4: Test and adjust
That’s it. We now have a header that dynamically shrinks as the viewer scrolls down the page. Why? As the viewer scrolls down the page the appropriate is-scroll-?-px classes are added to the body tag indicating how far down the page (in pixels) the document has scrolled. The CSS body.is-scroll-?-px properties then automatically adjust the padding in the heading and the visibility of the tagline.
We could have made it smoother by only adjusting 1 pixel per interval instead of 2 pixels. But, hopefully, you get the idea.