Do you want to create a sticky container in WordPress? A sticky container keeps the section in a fixed position on the page as the user scrolls, this feature can be particularly useful for displaying important information, such as contact details or a call-to-action, throughout the visitor’s browsing experience.
With the Container block from the Nexter Blocks, you can easily make the section sticky in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
Add the Container block with the appropriate layout to the page and follow the steps –
1. Go to the Extra Options tab, and enable the Sticky toggle.
2. From the Header Type section, you can select the sticky type. Here you’ll find two options –
- Normal + Sticky – With this option, you can create a sticky header or container. Where it will be visible initially, when the container reaches the top it will stick and when you scroll up it will scroll down.
- Only Sticky – With this option, you can create a reverse sticky header or container, where it will not be visible initially but once it reaches the top it will be visible and stick at the top. Once you scroll up it will hide again.
Select the option as per your requirements.
From the Animation section, you can select the animation effect for how the sticky container will show.
By enabling the On Mouse Scroll Up Sticky toggle, you can show the sticky container on the mouse scroll up only, i.e. it will not stick to the top while scrolling down it will only stick when you scroll up.
You can add a top offset for the sticky container from the Top Offset field for responsive devices.
Note: When On Mouse Scroll Up Sticky is enabled you won’t see the Top Offset field.
From the Transition Duration(s) field, you can set the transition speed for the sticky container to show.
By enabling the Stay In Container toggle, you can keep the sticky container within its parent container.
Now you should be able to see a beautiful sticky container, this can be used to create a sticky header.
