jQuery Plugin To Auto Show / Hide Site Header - cb-slideheader.js

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.