Press "Enter" to skip to content

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

Smooth Scroll And Sticky Header jQuery Plugin | sp.stickyHeader.js

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *