Gautam Buddha Temple Varanasi,Varanasi - Buddhist Pilgrimage

Thursday, June 4, 2015

Sticky menu on scroll in html5 and jquery

  Here, we will create a sticky menu bar in very simple way which is built only with CSS and jQuery.  
  1.Write this jquery code in top of your html page  
  <script type="text/javascript">  
     $(document).ready(function () {  
       var stickyTopPos = $('.navbar').offset().top;  
       var stickyNavbar = function () {  
         var scrollTop = $(window).scrollTop();  
         if (scrollTop > stickyTopPos) {  
         } else {  
       $(window).scroll(function () {  
 2.Add this stylesheet  
       position: fixed;  
       width: 100%;  
       left: 0;  
       top: 0;  
       z-index: 100;  
       border-top: 0;  
       background-color: #808080;  
 3.This is our menu  
  <div class="navbar">  
   <ul class="tabs" data-tab>  
     <li class="tab-title active"><a href="#panel1">Menu-1</a></li>  
     <li class="tab-title"><a href="#panel2">Menu-2</a></li>  
     <li class="tab-title"><a href="#panel3">Menu-3</a></li>  
     <li class="tab-title"><a href="#panel4">Menu-4</a></li>  
     <li class="tab-title"><a href="#panel5">Menu-5</a></li>  
     <li class="tab-title"><a href="#panel6">Menu-6</a></li>  
     <li class="tab-title"><a href="#panel7">Menu-7</a></li>     
   <div class="clear">  


  1. You have share the great info. I like your post. Thanks for sharing the good points. I will recommend this info. graphic designing courses in jalandhar

  2. This blog is very well done as i am looking forward more things from your blog, it is very well energetic too. so please update latest information too.

    Web Design Company in Chennai

  3. Your blog is very well good and i am very much interested in your blog, so please update latest information.

    Digital Marketing Company in Chennai

  4. Amazing Blog! This is the most useful post, those who are looking for study related information. Vinay Hari Education Consultant in Jalandhar

  5. Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing....

    Restaurant in OMR
    Apartments in OMR
    Villas in OMR
    Resorts in OMR