🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Sticky Banner

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us