25th Jun '22
/
3 comments

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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories:
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Categories:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Pro
Mmenu Light in Bricks

Mmenu Light in Bricks

Here's the steps to implement Mmenu Light for a sliding OffCanvas mobile menu in Bricks.
Categories:
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Categories:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
Pro
Responsive iframes in Bricks

Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks. Step 1 Edit your Page/Template with Bricks. Add a Code element having this…
Categories:
Tags: