jQuery Plugin To Auto Show / Hide Site Header - cb-slideheader.js
File Size: | 20.4 KB |
---|---|
Views Total: | 4933 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
cb-slideheader.js is a jQuery plugin that makes your fixed site header auto appear and disappear based on page scroll events.
The plugin provides 2 methods to create smart headers for your website:
- .cbSlideDownHeader(): The header will auto slide down on page scroll down, and auto disappear as you reach the top of the screen.
- .cbSlideUpHeader(): The header will disappear as you scroll down the webpage, and show up again as you reach the top of the screen.
How to use it:
1. Load jQuery library and the jQuery cb-slideheader.js at the end of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="path/to/jquery.cbslideheader.min.js"></script>
2. Create a header for your website.
<header class="cb-header">Header</header>
3. Make the header stick to the top of your web page.
.cb-header { position: fixed; left: 0; visibility: hidden; }
4. Call the method introduced above on the header.
$(".header").cbSlideDownHeader(); // OR $(".header").cbSlideUpHeader();
5. Default plugin options.
headerBarHeight: this.$element.height(), headerBarWidth: '100%', header2SelectorName: '.cb-header2', headerClone: false, fullscreenView: false, zIndex: 9999, boxShadow: 'none', opacity: 1, slidePoint: 0, slideDownDuration: 'normal', slideUpDuration: 'normal', slideDownEasing: 'swing', slideUpEasing: 'swing', slideDownCallback: function () {}, slideUpCallback: function () {}, headroom: false
6. Checkout the test
folder in the zip for more examples & usages.
Change log:
v0.4.0 (2017-05-14)
- Re-written in ES2015
v0.3.8 (2016-06-15)
- modify headroom option
v0.3.7 (2015-10-08)
- update
v0.3.2 (2015-08-14)
- smartphone bug fix
This awesome jQuery plugin is developed by maechabin. For more Advanced Usages, please check the demo page or visit the official website.