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.
Property | Type | Description | Default |
---|---|---|---|
isTop | Boolean | If true, the element is a header. If false, the element is a footer. | True |
id | String | The CSS id of the titlebar | ‘titlebar’ |
triggerId | String | The CSS id of the titlebar triggering element | undefined. 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