Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Sticky Navigation Bar</title>
</head>
<body>
	<div class="wrap">
		<div class="header">
		<h1>Website Header</h1>
		</div>
		<div id="sticker" class="navbar">
			<ul class="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Our Services</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		<div class="content">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis magna sed massa tempor rhoncus. Morbi euismod tellus id vulputate feugiat. Nulla id ullamcorper dui. Nam vel lectus eget quam pharetra tincidunt. Duis molestie rhoncus tincidunt. Phasellus leo dui, ullamcorper vitae velit vitae, fermentum tristique lorem. Duis eros arcu, viverra eget facilisis non, auctor a libero. Cras mattis dapibus justo. Pellentesque laoreet eros hendrerit justo ultrices aliquet. Pellentesque sit amet arcu ac velit viverra congue. Aliquam purus felis, venenatis feugiat nibh at, porta laoreet nulla. Mauris hendrerit purus quam, eu aliquet justo volutpat sit amet. Nulla consequat est ligula, in luctus quam posuere sed. Proin tincidunt in arcu id facilisis. Suspendisse interdum arcu et est convallis sagittis. 
			</p>
			<br />
			<p>
			Nam leo mauris, fermentum vitae neque sit amet, volutpat tempor odio. Aenean vitae adipiscing est. Donec vel ultrices massa. Suspendisse placerat nibh in mauris dictum, ac tincidunt sem luctus. Donec aliquet ante a ligula ultricies, ac mollis elit interdum. Morbi diam arcu, interdum quis varius eu, blandit vitae erat. Cras convallis eros in quam malesuada rutrum. Maecenas porta vitae massa ac malesuada. Sed ut molestie nisl. Maecenas rutrum commodo ligula, vel rutrum odio pretium ultricies. Morbi metus purus, blandit quis quam et, sodales varius ante. Aenean mattis tellus eu dui semper tincidunt. Nullam porta ut est a convallis. Fusce ante tortor, aliquam at dolor non, aliquam tempor turpis. Aliquam vitae bibendum velit, sit amet porttitor neque. Suspendisse potenti. 
			</p>
			<br />
			<p>
			Vivamus et porta velit. Duis quis purus adipiscing eros lacinia vulputate. Ut vel pharetra nisi. Quisque quis consectetur ipsum, a posuere dui. Aenean nisi tellus, iaculis a lorem sed, consectetur dignissim orci. Pellentesque egestas, sapien et semper pharetra, sapien odio auctor ligula, a ultrices tellus enim non felis. Sed in rhoncus orci, in egestas enim. Mauris eu egestas turpis. Duis consectetur tempus lacus, fringilla sollicitudin metus cursus non. Sed tincidunt nisl sit amet mauris aliquet, elementum sollicitudin ligula eleifend. Morbi dignissim convallis interdum. In venenatis fringilla mi, nec gravida ligula tristique sed. Curabitur pulvinar cursus nisi, non fermentum lacus faucibus vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ante nec ipsum fermentum laoreet. Phasellus est ante, commodo nec feugiat fermentum, vehicula quis risus. 
			</p>
			<br />
			<p>
			Integer gravida sed nulla sed aliquet. Nullam rhoncus eget leo ac luctus. Nulla nec dolor arcu. Sed iaculis dictum tempus. Nullam sed justo urna. Integer bibendum ultrices commodo. Sed eu ipsum ante. Proin vel felis a eros hendrerit consectetur vel eget turpis. Vestibulum rhoncus pharetra dui, sed posuere sem commodo vel. Maecenas eget ipsum porta, elementum elit sed, porttitor dui. Fusce vestibulum sagittis nisl, non pellentesque risus mattis ac. Cras interdum est id auctor tincidunt. Aenean laoreet ante velit, sit amet aliquam metus facilisis sit amet. Phasellus sodales dignissim libero, id condimentum dolor fermentum ut. Nam tristique porta ornare. Donec auctor, nisi et interdum gravida, nunc enim aliquam libero, quis placerat orci augue non odio.  
			</p>
			<br />
			<p>
			Morbi scelerisque tortor at sem euismod, eget interdum nulla tincidunt. Phasellus faucibus sagittis nunc ut sollicitudin. Suspendisse augue arcu, vestibulum ut velit quis, volutpat feugiat arcu. Praesent euismod tristique leo non pretium. Aliquam lacinia ac ipsum in volutpat. Suspendisse lacus orci, volutpat quis vulputate in, sollicitudin sed odio. Vestibulum eget ipsum nisi. Sed dignissim varius dolor et facilisis. Fusce massa velit, laoreet ac diam et, posuere dictum leo. Nullam tempus neque libero, quis volutpat turpis condimentum quis.  
			</p>
		</div>
		<div class="footer">
		<p>Designed By: <a href="https://www.facebook.com/ashim.kumar.9803">Ashim Kumar pall</a></p>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
              
            
!

CSS

              
                *{margin:0;padding:0;}
body{margin:0;padding:0; font-family: "Open Sans",Helvetica,Arial,sans-serif;}
.wrap{width:960px; min-height:1400px;background:#ecf0f1;margin:0 auto;}
.header{min-height:250px;background:#16a085; margin:0;padding:0;}
.header h1{text-align:center; padding-top:80px; color:#fff; font-size:60px; text-shadow:2px 2px 0px #030303;}
.navbar{background:#f39c12; height:40px; padding-left:100px;}
.navbar ul.nav{list-style:none;margin:0;padding:0;}
.navbar ul.nav li{float:left;}
.navbar ul.nav li a{ display:block;padding:10px; text-decoration:none; color:#fff;}
.navbar ul.nav li a:hover{ background:#e67e22;}
.content{padding:30px 150px;}
.content p{font-size:16px; color:#34495e; line-height:25px;}
.footer{height:30px; color:#ff0; background:#34495e;}
.footer p{text-align:center; padding:5px;}
.footer p a{color:#fff;}



div#sticker {
width:860px;
}
.stick {
	position:fixed;
	top:0px;
}
              
            
!

JS

              
                $(document).ready(function() {
		var s = $("#sticker");
		var pos = s.position();					   
		$(window).scroll(function() {
			var windowpos = $(window).scrollTop();
			
			if (windowpos >= pos.top) {
				s.addClass("stick");
			} else {
				s.removeClass("stick");	
			}
		});
	});
              
            
!
999px

Console