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 611 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

A CSS approach to content switcher in Bricks

A CSS approach to content switcher in Bricks

In this tutorial, we'll build a 100% CSS solution for content toggles in Bricks. Introduction If you are looking for an integrated solution in Bricks…
Categories:
Tags:
Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories:
Pro
Dynamic Horizontal Posts Accordion in Bricks

Dynamic Horizontal Posts Accordion in Bricks

Creating a horizontal accordion of featured images from posts output by Bricks' query loop.
Categories:
Tags:
Pro
Custom Posts Grid Layout in Bricks using CSS Grid

Custom Posts Grid Layout in Bricks using CSS Grid

There are at least three ways in which we can build custom loops in Bricks. Posts elementTurning on Query Loop on a containerCode element While…
Categories:
Auto Responsive Grids in Bricks

Auto Responsive Grids in Bricks

This tutorial provides the CSS that can be pasted for automatic responsive grids in Bricks Builder. Posts element Each post will get a right padding…
How to add a resizable desktop navbar in Bricks

How to add a resizable desktop navbar in Bricks

This tutorial will show you how to add a "More" menu item when the navbar overflows on desktop.
Categories:
Tags:
Pro
Dropdown Menu in Bricks using Interactions

Dropdown Menu in Bricks using Interactions

This Pro tutorial provides the steps to toggle a WordPress menu when a div is clicked using the Interactions feature in Bricks. When clicked: Step…
Categories:
Pro
How to Hide the Header Initially and Show It After Scrolling Down in Bricks

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

Hiding the header when the scroll position is at the top and reveal it after the user scrolls down.
Categories:
Tags:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags: