Sticky

This component helps to display content as sticky top, so that it moves while scrolling.

The standard HTML looks like this:

<div class="sticky">
  <div class="sticky__container">
    <div class="sticky__item">
      <p>a sticky box</p>
    </div>
  </div>
</div>

The values are:

• HEIGHT 100, 200, 300, 500, 600, 750
• SCREEN_SIZE lg, md, sm, xs

The structure of the class names are:

• .sticky
• .sticky__container
• Modifier
  • .sticky__container--{HEIGHT}
  • .sticky__container--{HEIGHT}-{SCREEN_SIZE}
  • .sticky__item