Sticky Multi Header Scroll
Sticky Multi Header Scroll is a lightweight jQuery plugin which makes multiple section headers stackable and sticky on the top of the webpage or component when scrolling down. It also allows the user to smoothly scroll to the corresponding content when clicking on the header navigation.
Features
- Sticky multi header on scroll
- On Click Navigate to the appropriate content
- Created entirely with jQuery
- Cross browser compatibility (IE9+, Chrome, Firefox, Safari and Opera)
- Multi device support (Web, Tablets & Mobile)
Demo
https://webthemez.com/demo/sticky-multi-header-scroll/index.html
How to use
=> Included jQuery file (minimum jQuery-1.5.1.min.js) => Included stickyMultiHeader.js => Include stickyMultiHeader.css => Here is the Markup for Sticky Header Scroll:
<div class="stickyWrapper" id="demoStickyHeader"> <div class="stickyMainContainer"> <div class="stickyHeader"> <h2>stickyHeader 001</h2> <a href="#" class="stickyNavLink">Link</a></div> <div class="stickyTabContainer"> ....... ....... ....... </div> </div> </div> <div class="stickyMainContainer"> <div class="stickyHeader"> <h2>stickyHeader 002</h2> <a href="#" class="stickyNavLink">Link</a></div> <div class="stickyTabContainer"> ....... ....... ....... </div> </div> </div> </div>
=> Call the stickyMultiHeader function:
$('#demoStickyHeader').stickyMultiHeader();
=> With optional parameters:
$('#demoStickyHeader').stickyMultiHeader({ scrollAnimation: 200 // Give the scroll animation speed height: 600 // Height of the container width: 450 // Width of the container });
For any support
Samson Email: [email protected]