Sticky Header & Footer On Scroll – titleBarJs

Preview:

Description:

titleBarJs is a tiny JavaScript plugin that displays fixed header & footer when you scroll down the webpage.

How to use it:

Import the JavaScript file titlebar.js into the webpage.

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

Create the sticky header & footer content as this:

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

Initialize the plugin with default options.

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

If you want to show the sticky header/footer after you scroll past a specific element.

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