Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024

This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section continues to scroll in Bricks.

The key is setting Position: sticky for the container having the element(s) you want to be in fixed position.

We need to add a bit of custom CSS to ensure that the sticky containers maintain their top value when the admin bar is showing.

Step 1

Create a Page and edit it with Bricks, add a Section having a Container.

Column gap: 60px.

Add 2 Containers (columns) inside.

Give the left column a class of say, sticky.

Position: sticky

Top: 20px

CSS → Custom CSS:

%root% {
	position: -webkit-sticky;
}

.admin-bar %root% {
  top: calc( var(--wp-admin--admin-bar--height, 0px) + 20px );
}

That sets the top position to 20px for the cases when the admin bar is visible.

Add an Image or any other element(s) you want to be made sticky in the left column.

Add element(s) in the right column that is/are typically taller than the one in the sticky container.

Step 2

Duplicate the Section and swap the left and right containers.

Duplicate the first Section and move this below the second one.

Change the content of the containers as needed.

For the Section where you swapped the columns so it is Text – Image, you may want to make sure on narrow screen widths the image appears at the top.

This can be done by setting

at the 767px breakpoint.

When done, the structure could be like this: