homepage >> The hideHeaderOnScroll jQuery plugin    

Yossef Benharosh is an apt web developer and the author of the eBook The essentials of object oriented PHP.

Yossef Benharosh web developer profile linkedin twitter github

The hideHeaderOnScroll jQuery plugin

Usage Install Settings

The hideHeaderOnScroll is a jQuery plugin that hides the page header when the user scrolls down the page, and shows the header when the user scrolls up the page.

* Scroll down and up the page to see the hideHeaderOnScroll plugin in action

The hideHeaderOnScroll plugin allows for part of the header to remain visible when you scroll the page down, and ofcourse you can choose to hide all of the header when you scroll down the page.

You can learn how to install the plugin in the installation section, and about how to customize the plugin in the settings section.




# Usage

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


The hideHeaderOnScroll plugin is jQuery dependent.

$(document).ready(function () {

The hideHeaderOnScroll plugin can be customized.

$(document).ready(function () {
        hideAtScrollingHeight : 500,
        speedEffect           : 300,
        hidingHeight          : 100,

# 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.-->  
  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*/
        top: 0;
        right: 0;
        left: 0;
        /* The header needs to have height */
        /* Change to your own colors */
        border:1px solid #b3b3b3;
  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.
  8. You can customize the plugin with the options that are listed on this page.
    For example:
    $(document).ready(function () {
            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.");

# Settings

hideAtScrollingHeight 0 How many pixels the user needs to scroll before the effect starts.
speed 250 The speed at which the header element pops or hides.
hidingHeight false How many pixels of the header needs to be hidden. i.e. value of 30 hides only 30px of the header.
The default is false so all of the header is hidden.


onShow Fires right after the header finishes to appear.
onHide Fires right after the header finishes to disappear.


The MIT License (MIT)