A hot pattern in web plan nowadays is the utilization of sticky headers, where the top part of a page containing key components, for example, the menu bar once looked past gets to be settled on the page, keeping on staying obvious. The accompanying is a case of a sticky header. As basic as the impact looks, actualizing a very much enhanced, dependable sticky header is more included than meets the eye.

Below is the example of sticky header:-

HTML-

<div id="logo">
        <a href="http://www.javascriptkit.com"><img src="http://www.javascriptkit.com/jkincludes/jksitelogo.gif" /></a>
    </div>

    <div id="header">
        <p>Some header content</p>
    </div>

    <div id="contentarea">
        <b>Main Content Start here</b>
        <p>Welcome to JavaScript Kit Demo content nothing to read here This is just some filler text Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here Welcome to JavaScript Kit Demo content nothing to read here Welcome to JavaScript Kit Welcome to JavaScript Kit Welcome to JavaScript Kit Welcome to JavaScript Kit This is just some filler text Welcome to JavaScript Kit This is just some filler text Welcome to JavaScript Kit Demo content nothing to read here This is just some filler text This is just some filler text Demo content nothing to read here Demo content nothing to read here Welcome to JavaScript Kit Welcome to JavaScript Kit Demo content nothing to read here This is just some filler text Welcome to JavaScript Kit This is just some filler text Welcome to JavaScript Kit Welcome to JavaScript Kit This is just some filler text This is just some filler text Welcome to JavaScript Kit Welcome to JavaScript Kit This is just some filler text This is just some filler text Demo content nothing to read here This is just some filler text Welcome to JavaScript Kit Welcome to JavaScript Kit This is just some filler text Welcome to JavaScript Kit This is just some filler text Demo content nothing to read here Demo content nothing to read here This is just some filler text Demo content nothing to read here This is just some filler text Welcome to JavaScript Kit</p>

    </div> 

CSS-

<style type="text/css">
      body{
  margin: 0;
  padding: 0;
}

body *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div#logo{
}

div#logo{
  width: 100%;
  height: 100px;
  background: lightblue;
  margin: 0;
  padding: 5px;
}


div#contentarea{
  padding: 10px;
}
body.sticky div#logo{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
 
body.sticky div#contentarea{
    margin-top: 100px; /* shift contentarea downwards by height of the header so it's fully in view when the header is fixed */
}
	</style>

jQuery-

<script type="text/javascript">
		       window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(f){return setTimeout(f, 1000/60)}
 
 
;(function($){ // enclose everything in a immediately invoked function to make all variables and functions local
 
    var $body,
    $target,
    targetoffsetTop,
    resizetimer,
    stickyclass= 'sticky' //class to add to BODY when header should be sticky
     
    function updateCoords(){
        targetoffsetTop = $target.offset().top
    }
     
    function makesticky(){
        var scrollTop = $(document).scrollTop()
        if (scrollTop >= targetoffsetTop){
            if (!$body.hasClass(stickyclass)){
                $body.addClass(stickyclass)
            }
        }
        else{
            if ($body.hasClass(stickyclass)){
                $body.removeClass(stickyclass)
            }
        }
    }
     
    $(window).on('load', function(){
        $body = $(document.body)
        $target = $('#logo')
        updateCoords()
        $(window).on('scroll', function(){
            requestAnimationFrame(makesticky)
        })
        $(window).on('resize', function(){
            clearTimeout(resizetimer)
            resizetimer = setTimeout(function(){
                $body.removeClass(stickyclass)
                updateCoords()
                makesticky()
            }, 50)
        })
    })
 
})

Description-

targetoffsetTop = $('#header').offset().top  - get distance between top of header element and top of document

var scrollTop = $(document).scrollTop() - decide how much the client has looked over the page with respect to the highest point of the record