Author: | pddivine |
---|---|
Views Total: | 877 views |
Official Page: | Go to website |
Last Update: | March 9, 2017 |
License: | MIT |
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 }); }