Day: August 10, 2015

Posted on

Sticky Navigation Bar Souce Code

Demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Stick Nav</title>
	<style>
body {
	margin: 0 0 0 0 !important;
	padding: 0; 
}
.header {
	padding: 20px 0;
	background-color: #333;
}
.nav {
	padding: 5px 0;
	background-color: slategrey;
	position: -webkit-sticky;
	top: 0px;
	z-index: 1;
}
ul {
	list-style: none;
}
li {
	display: inline;
}
.header, .nav {
	text-align: center;
	color: #fff;

}
.content {
	width: 600px;
	margin: 10px auto 100px;
}
.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	border-top: 0;
}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
 
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
      
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};
 
stickyNav();
 
$(window).scroll(function() {
    stickyNav();
});
});
</script>
</head>
<body>
<div class="wrapper">
	<div class="header">
		Header
	</div>
	<div class="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About Me</a></li>
		</ul>
	</div>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
	</div>
</div>

</body>
</html>