jQuery Fixed Header

Hi, today i am going to show you about how we put a fixed header or fixed menu to our website.we have seen this kind of feature in many websites, it is just simple trick and we can do this using jquery, when we start scrolling the website from top to bottom the normal header stick to to the page. we can do this in many ways, i have done this with few lines of jquey code.

HTML

take a div and give it name header.

<div class="header">

<ul>
<li>Html5</li>
<li>Ajax</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySql</li>
<li>CSS</li>
</ul>

</div>


<table width="896" height="358" border="0" cellpadding="10" cellspacing="0">
  <tr>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
  <tr>
    <td height="250" valign="top" bgcolor="#99CC00">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
    <td height="250" valign="top">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax and PHP. <br>
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</td>
  </tr>
</table>

CSS

set the style to header div and take one more class to change the style of header div while stick the header to webpage, set the fixed position to this class.

<style type="text/css">

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#FFF; margin:0; padding:0;}

#lessoncup{width:900px; height:auto;margin:0 auto;}

.header{-webkit-box-shadow: 0px 1px 2px #666; width:180px;
box-shadow: 0px 1px 2px #666;width:900px; height:40px;  background-color:#F60;padding:5px;margin:0 auto; font-family:Arial, Helvetica, sans-serif;font-size:11px;}

.fixedheader{ background-color:#333; position:fixed; top:0;}


ul{ list-style:none; margin:0; padding:0;}

li{ float:left; padding:5px; margin:5px; color:#FFF;cursor:pointer; font-weight:bold; font-size:14px;}
                
  </style>

JAVASCRIPT

first we need to know the positions of  header div, use offset() method to get or set the coordinates of any element. grab the top position of header with offset().top

after that use scroll method to window object and get the scrolling value using scrollTop() method this method use to get or set the current vertical scroll bar values.

here we need to check if scrollbar value reach and match to header offset value just we simply apply the style to header div using addClass() method this class having position : fixed; and top:0; properties, if the both values are not match we remove the class from header div using removeClass() method

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
  
        var myheader = $('.header').offset().top;
 
        $(window).scroll(function(){
   
   var woindowScroll= $(window).scrollTop();
   
                if( woindowScroll > myheader ) {
     
                        $('.header').addClass('fixedheader');
                        
                } else {
                        $('.header').removeClass('fixedheader');
                        
                }
        });
  });
  
</script>

Live Demo   Download Script