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

Category: Javascript | November 20, 2019
Author: woron113
Views Total: 95 views
Official Page: Go to website
Last Update: November 20, 2019
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply