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
