Making a simple sticky menu bar


Pernah lihat menu bar seperti di cssawards.net? Dalam posting kali ini, saya akan menunjukkan pada Anda bagaimana cara membuat sebuah sticky menu bar mudah dengan hanya beberapa baris kode Javascript dan jQuery.

sticky menu navigasi bar adalah bar yang diletakkan di tempat aslinya di #container pada template, tetapi ketika Anda mulai scroll ke bawah halaman yang panjang, bar itu akan menempel terus di bagian atas jendela browser, berikut ini contoh gambarnya:

Gb.1 - Contoh sebelum di scroll
Gb.2 - Contoh setelah di scroll

HTML:
<div id="wrapper">
	<header>
		<h1>Simple Sticky Menu Bar</h1>
	</header>
	<nav>
		Home | Menu 1 | Menu 2 | Menu 3
	</nav>
	<div id="content">
		<p>Website content here.</p>
	</div>
</div>

CSS:
body {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	background:#ddd;
}
#wrapper {
	width:940px;
	margin: 0 auto;
}
header {
	text-align:center;
	padding:50px 0;
}
nav {
	background:#333;
	color:#fff;
	height: 30px;
	width:100%;
	line-height:30px;
	position: relative;
	left:0;
	text-indent:10px;
}
#content {
	background: #fff;
	height: 1500px; /* presetting the height */
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	overflow:hidden;
}
.fixed {
	position:fixed;
}

JQUERY
$(document).ready(function() {
	
	//Calculate the height of 
//Use outerHeight() instead of height() if have padding var aboveHeight = $('header').outerHeight(); // when scroll $(window).scroll(function(){ //if scrolled down more than the header's height if ($(window).scrollTop() > aboveHeight){ // if yes, add "fixed" class to the

gampang kan :D

5 comments