Fix Element To The Top Within Its Parent Container – Bare-Bone-Affix

Preview:

Description:

A barebone affix JavaScript plugin which fixes an element to the top until it reaches the bottom of its parent container.

Dead simple to use and supports multiple sticky elements on the same page.

How to use it:

Download and import the Bare-Bone-Affix.

import { BareBoneAffix } from "barre-bone-affix"

Or import the bundled JavaScript file in the document.

<script src="./build/bundle.js"></script>

Add the affix-bba class to the element which should be sticky on page scroll.

<div class="affix affix-bba">
  ...
</div>

Add the affix-container-bba class to the parent container. That’s it.

<div class="affix-container affix-container-bba">
  <div class="affix affix-bba">
    ...
  </div>
</div>

If you have multiple sticky elements on the page, define the index using the data-affix-number attribute as follows:

<div class="affix-container affix-container-bba" data-affix-number="1">
  <div class="affix affix-bba" data-affix-number="1">
    ...
  </div>
</div>
<div class="affix-container affix-container-bba" data-affix-number="2">
  <div class="affix affix-bba" data-affix-number="2">
    ...
  </div>
</div>
<div class="affix-container affix-container-bba" data-affix-number="3">
  <div class="affix affix-bba" data-affix-number="3">
    ...
  </div>
</div>

Changelog:

11/20/2019

• Small fixes