I have a sample js fiddle provided here. The navigation bar is positioned right below the "Hello World" section, and the content follows beneath the nav bar. Is there a way to make the navigation bar stick to the top of the window once it reaches that point while scrolling down? I want it to remain fixed at the top even when scrolling further down the page. Can anyone provide assistance with achieving this? Thank you in advance!
Link to the jsfiddle: http://jsfiddle.net/Ptx4e/
Below is the CSS code used in the js fiddle:
#head{
width:100%;
height:200px;
}
h1{
text-align:center;
padding-top:70px;
}
nav{
background-color:black;
overflow:hidden;
width:100%;
}
nav ul{
color:white;
list-style:none;
text-align:center;
margin:0;
}
nav ul li{
display:inline-block;
padding:1% 6%;
}
nav ul li:hover{
background-color:tomato;
}