Sticky Menu Bar Using jQuery

Sticky menu bar using jquery will make website visitor easier navigation. In normal, menu bar will be on top and user has to move top to pick another category. But sticky bar will be in a fixed position on top of the page.

Stylesheet

#list1
{
	background-color:#333;
	margin:-8px;
}
#list
{
margin:auto; 
width:900px;
}
#list ul
{
background-color:#333;
list-style:none;
padding: 15px;
margin: 0;
}
#list ul li
{
display:inline;
}
#list ul li a
{
font-family: arial;
text-decoration: none;
color: #E0E0E0;
padding: 14px;
}
.fixed{
position:fixed;
width: 100%;
top: 1px;
}

jQuery for Sticky Bar

offsetTop() – jQuery function will return the position of the ID “list1”, variable listval stores this value
$(document).scroll(function() – This will be called when we scroll on webpage
scrollTop() – this will return the scrollbar position, variable topval stores this value.
if(topval >= listval) – this condition will be occur, when we scroll scrollbar and that scrollbar moves

Full Code

[code class=”javascript”]

[/code]

[code class=”css”]

[/code]
/*HTML Code*/

[code class=”html”]

[/code]