sectionClasses

Type:Function
Status:stable
Since:1.0.0
Platform:js
@blackbyte.sugar.js.dom.feature

This feature allows you to add some classes on your sections when they are in the viewport, near the viewport, above, etc…

  1. -in-viewport: Added when the section is in the viewport
  2. -from-above: Added when the section enters the viewport from above
  3. -from-below: Added when the section enters the viewport from below
  4. -above-viewport: Added when the section is above the viewport
  5. -below-viewport: Added when the section is below the viewport

Params

  1. settings{}TSectionClassesSettings

    The settings you want to override

Example

import { sectionClasses } from '@blackbyte/sugar/features';
sectionClasses();

Settings

  1. inClass’-in-viewport’String

    The class to add when the section is in the viewport

  2. keepInClassWhenAbovefalseBoolean

    Whether to keep the inClass when the section is above the viewport

  3. [fromAboveClass=’-from-above’] The class to add when the section enters the viewport from above*-String

    null

  4. [fromBelowClass=’-from-below’] The class to add when the section enters the viewport from below*-String

    null

  5. [aboveClass=’-above-viewport’] The class to add when the section is above the viewport*-String

    null

  6. [belowClass=’-below-viewport’] The class to add when*-String

    null

  7. offset25Number

    The offset in px to consider the section is in the viewport