Compatible Browsers:
Example: View Code Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 CSS3 Fixed Navigation Header Bar</title>
<style>
/* Begin HTML5 CSS3 Fixed Navigation Header Bar */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
html {margin:0; padding:0;}
BODY {font-family:verdana,arial,ms sans serif; font-size:100%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
a {color:#69C;text-decoration:none;}
a:hover {color:#F60; text-decoration:underline;}
.header {margin:0; width:100%; height:80px;}
.subnav-fixed {
position:fixed;
top:0px;
left:0;
right:0;
z-index:1000;
background-color:#EFEFEF;
-webkit-box-shadow:0px 5px 20px 5px rgba(4, 5, 5, 0.3);
-moz-box-shadow:0px 5px 20px 5px rgba(4, 5, 5, 0.3);
box-shadow:0px 5px 20px 5px rgba(4, 5, 5, 0.3);
}
.headbar ul li.logo{
display:block;
float:left;
list-style:none;
background-color:transparent;
padding:5px 30px 5px 0px;
margin-left:0px;
}
.headbar ul li{
display:block;
float:left;
list-style:none;
background-color:transparent;
padding:13px 20px 23px;
margin-left:0px;
}
.content {width:100%; height:auto;}
</style>
</head>
<body>
<div class="header">
<div class="headbar">
<ul>
<li class="logo"><!-- insert your own logo image or use font text --><img src="http://snapbuilder.com/images/logo.png"></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="https://snapbuilder.com">SnapBuilder</a></li>
</ul>
</div>
</div>
<div class="content">
<h3>HTML5 CSS3 Fixed Navigation Header Bar</h3>
<br />
<p>Scroll down to view the fixed navigation header bar.</p>
<br />
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=225">HTML5 CSS3 Fixed Navigation Header Bar Code Snippet</a> page. ]
</div>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<br />
</div>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var $win = $(window)
var $nav = $('.headbar');
var navTop = $('.headbar').length && $('.headbar').offset().top;
var isFixed=0;
processScroll()
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
}
}
});
</script>
</body>
</html>