Persistent Header/ Sticky Header/Stick to Scroll Web (IE/Chrome/Firefox)

I was searching the internet on how to code a sticky header using javascript and found so many articles and multiple ways to achieve it but most of them didn’t work on IE or some of them were too complicated to understand for a person like me who has little know how of the Javascript. So after searching for hours I found the article below which was simple and easy to understand furthermore it was working on IE .


“Many must’ve seen this automatic-header-scroll-stick feature. Where a normal looking header suddenly sticks to the page when the page is scrolled.

Gmail to recently introduced such a “auto-sticking-interaction-header”. I thought I should give a simple explanation about it.”

<!DOCTYPE html>
  <meta name="generator" content= "HTML Tidy for Linux (vers 25 March 2009), see">
  <title>Auto Scroll Lock Header with jQuery</title> 
  <script src= "" type="text/javascript"> </script> 
  <style type="text/css">
    table { 
      background: black;
      color: white;
    body, td {
      font: 13px sans-serif;
    #stickyheader {
      width: 100%;
      height: 10px; 
    #stickyalias { 
      display: none; 
      height: 10px;
    #unstickyheader {
      margin-bottom: 15px;
    #othercontent { 
      margin-top: 20px;
</head> .... ... .. .

 [Read More: Article by Ruturaj]

Leave a Reply

Your email address will not be published. Required fields are marked *