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) {  
           $('.navbar').addClass('sticky');  
         } else {  
           $('.navbar').removeClass('sticky');  
         }  
       };  
       stickyNavbar();  
       $(window).scroll(function () {  
         stickyNavbar();  
       });  
     });  
 </script>  
 2.Add this stylesheet  
  <style>  
     .sticky  
     {  
       position: fixed;  
       width: 100%;  
       left: 0;  
       top: 0;  
       z-index: 100;  
       border-top: 0;  
       background-color: #808080;  
     }  
 </style>       
 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>     
   </ul>  
   <div class="clear">  
   </div>  
  </div>  

4 comments:

  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

    ReplyDelete
  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

    ReplyDelete
  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

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

    ReplyDelete