Sticky scrolling effects for fixed headers

When a visitor starts scrolling down your website it’s a nice feature to keep displaying your header all the time. This way a visitor can keep using the handy main menu without scrolling back to the top of the page. It make navigating through your website a lot easier.

This kind of header is then called a “sticky” or “fixed” header.

Elementor can make your header sticky if you have the Elementor PRO plugin. With this feature you can set the header static on a webpage. However this feature lack a few options to make you sticky header look good.

With this add-on for Elementor PRO you can add the following scrolling features to your sticky header:

Shrink the header to a minimum height
Change the background color
Making the background transparent
Downsize images after scrolling
Add or change the bordercolor of the fixed header
Add or change a boxshadow of the fixed header

How does the sticky scrolling effect add-on work?

First make sure you’ve installed the Elementor PRO plugin version. Then make your header sticky. How to create a sticky header in Elementor see this link https://elementor.com/help/sticky-headers/. It’s very easy.

Once you enabled the sticky header you’ll notice some extra sticky scrolling effect underneath. In the video below you can see how you can configure the different options to make your sticky header behave even better!

Tip: Disable resizing for some images If the option downsize images is set, all images in the sticky header will be downsized. However by adding the classname "sticky-scrolling-effect-noresize" to an image, this image won't resize during scrolling. You can add a css class to your image at the "Advanced" tab of the section "Layout". Just add the classname in the "CSS Classes" field and click update.

Why do i need the sticky srcolling effects add-on?

No extra CSS coding required

Control the sticky scrolling effects inside the Elementor editor without using requiring any CSS styling.

Makes the header behave nicer

These effects gives your website some small extra movement making the user experience even better.

Control over height of the header

Reducing the height of your header allows you to show more content to the user but keeping the same functionality.