How to Use Sticky/ Pin Element in BricksFly

Sticky  Elements lets you keep a specific element fixed in place while scrolling, helping you create focused and interactive sections on your website. It’s a useful feature for things like sticky content, scroll animations, or highlighting key areas as visitors move through the page. 

It adds more control to your layouts and makes your designs feel more dynamic and engaging.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Sticky/ Pin Element in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Extension tab. 
4. Under Scroll Smoother, toggle on Sticky Elements. 

Step 1: Choose Your Target Element & Enable the Wrapper 

• Click Structure, then navigate to the container of the element where you want to apply the sticky animation. After that, go to the Style tab and enter the desired class name in the CSS Classes field.  

In this example, the class name is set to sticky-section. However, you can use any class name you prefer.

Note: You have to paste this class name in the End Trigger Custom field.

• Next, click the Content tab and look for the Sticky Elements extension.
• Click on ‘Sticky Elements’ and toggle the ‘Enable’ switch to ‘Yes’ to begin configuring the Sticky Element for this container.

Step 2: Configure Pin and Trigger Settings

Configure how the sticky element behaves during scrolling by setting the Pin Trigger, End Trigger, and Pin options.

Pin Trigger 

Controls which element determines when the sticky behavior starts and ends. You will find two options included 

Default: The sticky behavior starts and ends automatically based on the container’s position and viewport scroll. 

Custom: Allows you to manually set the trigger element that controls when the sticky behavior starts or ends.

For example, ‘Default’ is selected here, but you can choose any option that suits your needs.

End Trigger 

Default: Uses the container’s natural scroll boundary to stop the sticky behavior automatically.

Custom: Allows you to specify a custom element that determines where the sticky behavior should end. Enter the CSS class name in the Custom End Trigger field of the target element that will be used as the end trigger.

In this example, Custom is selected. 

Note: Since we used the CSS class sticky-section, we need to enter .sticky-section in the Custom field.

Pin 

The Pin setting offers three options: True, False, and Custom.

• True: Keeps the element fixed in the viewport while the page scrolls.
• False: Allows the element to scroll normally with the page.
• Custom: Defines specific scroll behavior, such as custom start/end positions, durations, or advanced triggers.

For example, ‘True’ is selected here, but you can choose the option that fits your preference.

Pin Step 3: Set the Pin Trigger Points  

Choose where the pinning starts and ends by aligning your element with the viewport, such as when its top hits the viewport’s top. You can also set a custom position.

Use Breakpoint to decide which devices the pinning works on, ensuring your animation fits all screen sizes.

Pin Start

The Start setting offers options like:
Top Top, Top Center, Top Bottom, Center Top, Center Center, Center Bottom, Bottom Top, Bottom Center, Bottom Bottom, and Custom.

Each option matches a part of the element (Top, Center, Bottom) with a part of the screen (Top, Center, Bottom) or uses a custom position.

For example, ‘Top Top’ is selected, so pinning starts when the top of the element reaches the top of the viewport.

Pin End 

The Pin End setting offers similar options to Pin Start.

For example, ‘Bottom Top’ is selected, which means the pin stops when the element’s bottom reaches the top of the viewport.

Pin Spacing 

The Pin Spacing setting offers three options: True, False, and Custom.

• True: Adds spacing below the pinned element equal to its height.
• False: No space will be added for the pinned element.
• Custom: Manually define how much space should be added where the element originally was.

In this example, False is selected. However, you can choose any option based on your preference.

Pin Markers 

Pin Markers has two options: True and False.

• True: Displays colored markers on the page to indicate the start and end of pinned elements visually.
• False: Hides the markers from view.

In this example, False is selected. However, you can choose the option that works best for your design.

Toggle Class

Allows you to add a CSS class when the sticky behavior becomes active. This is useful for applying custom styles, such as changing the background color, adding a shadow, or adjusting the Element appearance while it is pinned.

In this example, no toggle class is added. However, you can apply a custom class to change the background color when the sticky effect becomes active.

Final Results  

You Did It  

You’ve successfully activated and set up the Sticky Elements extension! Whether you’re making storytelling sections, sticky headers, or interactive visuals, Sticky Elements helps you build scroll-based effects that improve your website’s design. 

Additionally,  if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.