The hideHeaderOnScroll jQuery plugin

# Usage

The hideHeaderOnScroll plugin needs a fixed header object on which it can perform its tricks.

$("#header").hideHeaderOnScroll();

The hideHeaderOnScroll plugin is jQuery dependent.

(function($){
$(document).ready(function () {
    $("#header").hideHeaderOnScroll();
});
}(jQuery));

The hideHeaderOnScroll plugin can be customized.

(function($){
$(document).ready(function () {
    $("#header").hideHeaderOnScroll({
        hideAtScrollingHeight : 500,
        speedEffect           : 300,
        hidingHeight          : 100,
    });
});
}(jQuery));

# How to install

1. Download the hideHeaderOnScroll plugin.
2. Unzip, and see how to use the plugin in the attached examples/index.html file.
3. Your header element need to be at fixed position.
   For example, element with id of "header".
   

   
   <div id="header">      
   <!--The content of your header.-->  
   </div>
   

4. The header element has to be fixed. For example, the css rules for the header can look something like this:
   

   
   #header {
       /* The header has to be at fixed position*/
       position:fixed;
       top: 0;
       right: 0;
       left: 0;
       z-index:10;
       overflow:hidden;
       width:100%;
       /* The header needs to have height */
       height:119px;
       /* Change to your own colors */
       border:1px solid #b3b3b3;
       background:#efefef;
   }        
   

5. Include the jQuery library before you include the hideHeaderOnScroll plugin.
   

   <script src="assets/js/jquery.min.js"></script>

6. Include the plugin file.
   For example, if you extract the folder plugin straight to the root of your website:
   

   <script src="assets/js/jquery.hideHeaderOnScroll.min.js"></script>

7. Call the plugin on the header of your page.
   

   
   <script>
   $("#header").hideHeaderOnScroll();
   </script>   
           

8. You can customize the plugin with the options that are listed on this page.
   For example:
   

   
   <script>
   (function($){
   $(document).ready(function () {
       $("#header").hideHeaderOnScroll({
           hideAtScrollingHeight : 500,
           // The speed of the effect
           speed : 500,
           // Hide only 30px of the header. The default is false so all of the header is hidden.
           hidingHeight: 30,
           // onShow : function() {
           //     alert("The header is now fully down/shown.");
           //},
           // onHide : function() {
           //     alert("The header is now fully up/hidden.");
           //},
       });
   });
   }(jQuery));
   </script>   
           

# Settings

Callbacks

License

The MIT License (MIT)