Skip to content

A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page up its being showed.

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 

Shy Header

A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page up its being showed.

Demo

Please, take this demo as it is, a little demo where I pretend to show the power of this plugin, but consider your own target before copy/paste the code. It is possible that you need to reset some properties contained in the CSS file.

Customizable

• You could change the name of the class that is going to be added to the header ('is-watching' by default). Remember then to apply your styles to this new class.

• Add an offset to your main container.
Due to the header is fixed to the top of the window, its height do not computable for the DOM, so the next sibling starts at the very top of the document. If you need to add an offset to this sibling equal as the header's height, set a class name 'shy-container' by default when initializing the plugin as a value for the option 'container'.

• Customize or change the CSS files.

Usage

• Download or fork the repository.

• Include jQuery and the Javascript file minify or not in your HTML.

    // Initialize the plugin
    $("your-header-selector").shyheader();
    
// some options are available $("your-header-selector").shyheader({ classname : "is-watching", container : 'shy-container' });

Credits

• Feel free to download, modify, break, use or destroy this plugin.

"# shyheader"

About

A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page up its being showed.

Resources

Releases

No releases published

Packages

No packages published