Floating top sticky menu on scroll

floating sticky menu

A nice simple sticky menu effect to always keep the menu in sight even when scrolling .

See a working example here

jQuery

$(".floating-wrap").hide();
	$(window).scroll(function(){
		if($(window).scrollTop() >= 113 ) { 
		$(".floating-wrap").fadeIn("slow");
	} else { 
		$(".floating-wrap").fadeOut("fast");        
	}        
});

CSS

* {padding:0;margin: 0;}
body {background: url("texture.png");}
.wrapper {height:4000px; font-size:18px; color:#ffffff; text-decoration: none;}
.floating-wrap {position: fixed;top:0;width: 100%;background: url("noir_trans40.png");border-bottom:2px solid #666666;z-index:50;}
.floating-menu {list-style: none; margin:0 auto; width:600px;}
.floating-menu li {display: inline-block;}
.floating-menu li a {font-size: 13px;font-weight: 300;display: block;padding:15px 20px;color: #333333;text-decoration: none;}
.floating-menu li a:hover {background: #666666;color: #ffffff;transition: all 0.5s ease 0s;}
.header {background: #666666;}
.main-menu {list-style: none; margin:0 auto; width:600px;}
.main-menu li {display: inline-block;}
.main-menu li a {font-size: 18px;font-weight: 300;display: block;padding:40px 15px;text-decoration: none; color:#ffffff;}
.main-menu li a:hover {background: #333333;transition: all 0.5s ease 0s;}

HTML

<div class=”wrapper”>                         <div class=”floating-wrap”>         <ul class=”floating-menu”>             <li><a href=”#”>Item 1</a></li><li><a href=”#”>Item 2</a></li><li><a href=”#”>Item 3</a></li><li><a href=”#”>Item 4</a></li><li><a href=”#”>Item 5</a></li><li><a href=”#”>Item 6</a></li>         </ul>     </div><!– sticky-wrap –>     <div class=”header”>         <ul class=”main-menu”>             <li><a href=”#”>Item 1</a></li><li><a href=”#”>Item 2</a></li><li><a href=”#”>Item 3</a></li><li><a href=”#”>Item 4</a></li><li><a href=”#”>Item 5</a></li><li><a href=”#”>Item 6</a></li>         </ul>     </div><!– header –>     </div><!– wrapper –>

Leave a Reply

Your email address will not be published.

Views: 164