Go to rebrand

Scroll Boundaries

Contains the following scripts:

  • scroll-boundaries-helper.es6 - Helper for adding or removing a class to an element if the scroll is inside the boundaries of another element.
  • scroll-boundaries-delay-helper.es6 - Helper for adding or removing a class to an element if the scroll is inside the boundaries after some time.
  • scroll-boundaries-observer.es6 - Observes when the scroll is inside some element position boundaries and triggers a callback every time the scroll goes in/out those boundaries.

How to use

These helpers depend on the Scroll throttled Broadcaster so make sure to include the main_site_core.js in your page.

1. You will need to import the boundaries helpers depending on your needs as modules in the scripts you want to use, i.e:

import ScrollBoundariesObserver from '@consumeraffairs/ca-styleguide/modules/ca_styleguide_scroll_boundaries/scroll-boundaries-observer.es6'; import ScrollBoundariesHelper from '@consumeraffairs/ca-styleguide/modules/ca_styleguide_scroll_boundaries/scroll-boundaries-helper.es6'; const scrollBoundariesObserver = new ScrollBoundariesObserver(); const asideShowOnStuck = new ScrollBoundariesHelper(scrollBoundariesObserver); asideShowOnStuck.init({ boundariesElSelector: '.js-floating-aside-start-point', elSelector: '.js-dynamic-aside', toggleClass: 'sticky-aside__dyn--vsbl', });

Where:

  • boundariesElSelector - Selector for the element used to calculate the scroll boundaries.
  • elSelector - Element in which the toggleClass will be applied or removed.
  • toggleClass - Css class to be applied or removed when the scroll is inside the boundaries.

If you need to add a delay then use the scroll-boundaries-delay-helper.es6 script like this:

import ScrollBoundariesObserver from '@consumeraffairs/ca-styleguide/modules/ca_styleguide_scroll_boundaries/scroll-boundaries-observer.es6'; import ScrollBoundariesDelayHelper from '@consumeraffairs/ca-styleguide/modules/ca_styleguide_scroll_boundaries/scroll-boundaries-delay-helper.es6'; const scrollBoundariesObserver = new ScrollBoundariesObserver(); const wizardDelayedStickyFooter = new ScrollBoundariesDelayHelper(scrollBoundariesObserver, 90); // second parameter is 20 by default wizardDelayedStickyFooter.init({ boundariesElSelector: '.js-floating-aside-start-point', elSelector: '.js-sticky-footer-banner', toggleClass: 'cta-box--ft-vsbl', });

Demo

Element that will be added/removed a class name depending on its container boundaries. Scroll down to see how it works.