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>  
Best Mobiles Below Rs 8000

4 comments:

  1. 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
  2. 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
  3. Amazing Blog! This is the most useful post, those who are looking for study related information. Vinay Hari Education Consultant in Jalandhar

    ReplyDelete
  4. http://technologiescrunch.blogspot.com/2018/08/best-android-smart-phones-under-rs-15000.html

    ReplyDelete