Fixed and Sticky position: How to make an element to follow a scroll

What you’ll learn:

How to make fixed menu

How to make sticky element

Fixed Panel is a container meant to move alongside a user scrolling the website. It can be used as a permanent menu for quicker navigation or a chat bot to engage with your customers. If you need your elements to move with the user’s scroll, then this tutorial is for you. To achieve our scroll dependent movement we’re gonna need just two positions here: fixed and sticky.

How to make fixed menu

Fixed Navbar is most commonly used to provide a user with quick access to other subpages mostly because of long scroll time. It is positioned like an absolute element and does not obey the relativity constraint to other elements on the page. And because it is a common region, it will behave the same way on every subpage.

Here’s how to build your fixed menu:

First, you’ll need a menu, so let’s build it real quick by dropping an area to a navbar, and inside the area, we’ll add a basic menu widget.

Go to the widget styles of the area.

We’ll have to make it look presentable. Let’s add some nice paddings to our menu and a background color to our area, since it’s going to travel all over our website and it might be hard to notice if the background colors keep changing. Let’s add a border to help us differentiate the menu from the rest of the page.

Learn more

How to createa Menu in BOWWE

Now we can start playing with positioning. Select the section inside the navbar and go to the position tab.

Scroll down to position styles, select the fixed position, and place it top center. With all that we should have a moving menu.

Remember:

Fixed position isn’t a stable form of position. Too many of those elements in one page can create untamable chaos. Try to use it sparingly.

⚡ BOWWE Expert Tips:

You might need to add some top padding on a section below. Since the menu doesn’t obey relative rules now it can cover some other elements, so give it some space.
The position will remain fixed for mobile devices as well. If you don’t want it for mobiles you can simply switch it back to position: relative using cascading styles. If you do want to remain fixed be sure to adjust the size of your navigation so it matches smaller screens.

How to make a sticky newsletter

Similarly to fixed, sticky position follows the user as they scroll through the page, but it also follows certain restrictions. The difference between the two is that the sticky position needs a defined area where it can move freely like with the fixed position. Without those constraints, the sticky position will remain stationary like the rest of the page.

Note:

Side Panel is mostly used in blog related subpages and it might not look good on every subpage, but the sticky position can be useful in unorthodox solutions. It depends on your imagination.

Here’s how to build your sticky side panel:

Our demonstration will be shown on the column widget but the same effect can be achieved with the common region Side Panel. Drop an empty 2-column widget and set the aspect ratio to 4:8.

Inside the left column, we’re going to drop an empty area and add a text, and a newsletter. We’ll style everything to make it look nice.

Note:

We can use categories, tables of content or redirects, but most common usage is a newsletter form.

Content of the right column doesn’t matter in this scenario so we’ll stuff it with text in order to see the scroll work properly.

Now we need to apply our sticky position. Select the element we want to move and go to widget styles.

Go to position tab.

Scroll down to position styles and select position: sticky.

The element will now scroll while in view but it’s touching the border of our screen. We can improve that aspect by enabling vertical positioning and adding an offset on the Y-axis. In this case, we’re going to add 80 px.

Now we can see that our newsletter follows while we read the article to further encourage us to subscribe for more content.

⚡ BOWWE Expert Tips:

The sticky only works if the parent of the element provides enough space for it to move. If both element and parent have the same height, then the sticky element will remain stationary. Same goes for the mobile resolution. Because of the little space the sticky position rarely works on smaller screens.
On mobile devices the columns automatically switch to be contained within one column, which effectively disables the sticky element from moving, since it now takes the entire space of its column. We recommend leaving this as it is. The sticky position is not suited for smaller screens and is best left as relative.

Congratulations!

Now you know how to use fixed and sticky positions!

Fixed and Sticky position: How to make an element to follow a scroll

How to make fixed menu

Remember:

How to make a sticky newsletter

Note:

Note:

Dedicated to you

How to set up a Blog in less than 1h in BOWWE?

How to make an online Portfolio in BOWWE?

How to generate images with AI in BOWWE?

Can't find what you're looking for?

3 years for less than 1 year

$723