<p>This is some page contents.</p> <p>This is some page contents.</p>
<p>This is some page contents.</p> <p>This is some page contents.</p> 


<ul id="stickymenu" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>

</ul>

<h3>A CSS sticky menu that uses JavaScript to implement the sticky logic. It does so by detecting when the target menu is about to disappear partially from the viewport, and add a CSS class of "sticky" to it to make it stick.</h3>

<p>Menu works in all modern browsers.</p>

<hr />


<p>This is some page contents.</p> <p>This is some page contents.</p> 
<p>This is some page contents.</p> <p>This is some page contents.</p> 

<div style="height:1000px"></div>

body{
	padding: 0;
	margin: 0;
}

p{
	margin: 10px;
}

.solidblockmenu{
	margin: 0;
	padding: 0;
	float: left;
	font: bold 14px Arial;
	width: 100%;
	overflow: hidden;
	top: 0;
	position: relative;
	margin-bottom: 1em;
	border: 1px solid #625e00;
	background: black;
	border-width: 1px 0;
}

.solidblockmenu.sticky{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.solidblockmenu li{
	display: inline;
}

.solidblockmenu li a{
	float: left;
	color: white;
	padding: 12px 11px;
	text-decoration: none;
	border-right: 1px solid white;
}

.solidblockmenu li a:visited{
	color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
	color: white;
	background: darkred;
}

var stickymenu = document.getElementById("stickymenu")
var stickymenuoffset = stickymenu.offsetTop
var scrolltimer

window.addEventListener("scroll", function(e){
	requestAnimationFrame(function(){
		if (window.pageYOffset > stickymenuoffset){
			stickymenu.classList.add('sticky')
		}
		else{
			stickymenu.classList.remove('sticky')
		}
	})
})