Check out the sticky header I created here.
However, when it sticks in place, the text moves down and goes out of the container.
I want the header to remain within the container.
Here is my HTML & jQuery:
<div id="container">
<div id="menu">
<ul>
<li><a href='#'>Line 1</a></li>
<li><a href='#'>Line 2</a></li>
<li><a href='#'>Line 3</a></li>
</ul>
</div>
</div>
My JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>=575)
{
$('#menu').addClass('fixed');
}else{
$('#menu').removeClass('fixed');
}
});
});
</script>
CSS style:
#menu{
height: 35px;
background-color:brown;
z-index:200;
}
#menu ul li{
float: left;
list-style: none;
line-height: 35px;
}
#menu a {
color: #fff;
text-decoration: none;
font-size 16px;
font-weight: bold;
padding: 0 20px;
}
#menu.fixed{
position: fixed;
top:0;
width: 720px;
}
#container{
width: 720px;
margin: 0 auto;
}
Thank you for your help!
- Michael