Sticky Banner

A sticky banner that slides in passed a target element or a scrolling offset.

How to

The Sticky Banner component is used to reveal a banner on scrolling.

The component comes with some options you can use to control the banner visibility:

• show the banner when a specific element leaves the viewport: add the data-target-in attribute and set it equal to a unique selector of the trigger element;
• show the banner after window has scrolled of a specific amount of pixels: add the data-offset-in attribute and set it equal to the amount in pixels. This can be combined with the data-target-in attribute;
• hide the banner when a specific element enters the viewport: add the data-target-out attribute and set it equal to a unique selector of the trigger element;
• hide the banner after window has scrolled of a specific amount of pixels: add the data-offset-out attribute and set it equal to the amount in pixels. This can be combined with the data-target-out attribute.

Scrollable Element #

By default, the visibility of the sticky banner is toggled by the scrolling of the window element. If you have a different scrollable element in your page, you can use the data-scrollable-element attribute to pass the CSS selector of the scrollable element.

For example, if you have a <main class="main-el"> with a height: 100vh and overflow: auto, you can set data-scrollable-element='.main-el':

<div class="sticky-banner bg shadow-sm js-sticky-banner" data-target-in="#sticky-banner-target" data-scrollable-element=".main-el">
  <!--👇 sticky banner content -->
  <p class="text-center padding-md">Sticky Banner</p>
</div>

Categories

• Content and Layout > Banner
• Effects > Scroll
• Navigation > Misc

Bug report & feedback

Component Github page ↗