JavaScript Library To Create Sticky Header & Footer On Scroll | titleBarJs

titleBarJs is a JavaScript library for creating header and footer sections that are displayed after a user scrolls below a certain point.

fixed header and footer with scrolling content, sticky header on scroll, smooth sticky header on scroll javaScript, sticky header footer with scrolling

How to make use of it:

1. Import the JavaScript titlebar.js file into the webpage.

<script src="titlebar.js"></script>

2. Create the content of the sticky header and footer as follows:

<span id="titlebar">
  <p class="titlebarContent">Content Here</p>
</span>
<span id="titlebarbottom">
  <p class="titlebarContent">Content Here</p>
</span>

3. Configure the plugin with the default options.

document.addEventListener('DOMContentLoaded', main);
function main () {
  titlebarJs.init({
    isTop: true,
    id: 'titlebar',
    triggerId: 'body'
  });
  titlebarJs.init({
    id: 'titlebarbottom',
    isTop: false
  });
}

4. If you want to show the sticky header/footer after scrolling past a specific item.

function main () {
  titlebarJs.init({
    isTop: true,
    id: 'titlebar',
    triggerId: '#element'
  });
  titlebarJs.init({
    id: 'titlebarbottom',
    isTop: false
  });
}

API

titlebarJs.startTypist([options]);

  • options
    • Optional. An object to override library defaults.
PropertyTypeDescriptionDefault
isTopBooleanIf true, the element is a header. If false, the element is a footer.True
idStringThe CSS id of the titlebar‘titlebar’
triggerIdStringThe CSS id of the titlebar triggering elementundefined. The body tag will be used as the trigger.

Sticky Header & Footer On Scroll, titleBarJs Plugin/Github


See Demo And Download

Official Website(pddivine): Click Here

This superior jQuery/javascript plugin is developed by pddivine. For extra Advanced Usage, please go to the official website.

Share