jQuery Dynamic & Sticky Website Header Plugin - HeadShrinker

File Size: 19.8KB
Views Total: 4877
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Dynamic & Sticky Website Header Plugin - HeadShrinker

Head Shrinker is jQuery plugin that shrinks your website header section and makes it sticky at the top of your web page when scrolling down. Ideal for creating a fixed position top navigation menu for your website.

How it works:

The body class of "headshrinker" is added when the plugin is active.Head Shrinker also adds a class of "headshrunk" onto the cloned header in case you want to overwrite CSS specifically.

See also:

How to use it:

1. Include the required Head Shrinker stylesheet in the head section.

<link rel="stylesheet" href="headshrinker.css" media="all" />

2. Create a header section that will be cloned as a sticky top menu bar when scrolling down the page.

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

3. Include necessary javascript library files at the bottom of your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.headshrinker.js"></script> 

4. Call the plugin with options.

jQuery(document).ready(function () {
fontSize: "17px", 
mobileMenu: true 

5. All the options.

jQuery(document).ready(function () {
zindex: 99999, // set CSS z-index
shrinkBy: 2, // shrink by this multiple
fontSize: "", // add font size in here
shrinkMenu: false, // convert menu to hamburger in all instances
revealAlign: "right", // left or right hamburger menu
revealTop: "12px", // adjust top positioning of hamburger menu
shrinkMenuTop: "69px", // adjust top positioning of the flyout menu
menuSwitch: 768, // aimed at the mobile experience, when menu is this width, convert to hamburger
navTarget: 'nav', // this is the element WITHIN the cloned headshrinker bar
mobileMenu: false // set to true if you want to remove the desktop menu and replace with headshrinker when in mobile view (menuSwitch)

This awesome jQuery plugin is developed by weare2ndfloor. For more Advanced Usages, please check the demo page or visit the official website.