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

Page Export

An export file of the fully built Page is provided near the end.

Manual setup instructions are below.

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.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro