Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Navigation / Menus >> JS - CSS3 Fixed Navigation Header Bar


Code Snippet </> Info


Snippet Name: JS - CSS3 Fixed Navigation Header Bar

Description: A simple JavaScript and CSS3 fixed navigation header bar that keeps your important links fixed at the top of the page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2019-12-10 00:21:40

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library