StickyNav

Developer
Tom Hermans
Size
4,306 Kb
Views
20,240
  1. StickyNav Previews
  2. StickyNav HTML Codes
  3. StickyNav CSS Codes
  4. StickyNav JS Codes

How do I make an stickynav?

What is a stickynav? How do you make a stickynav? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

StickyNav Previews
IQ Test

StickyNav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>StickyNav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demo_top_wrapper">
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">Our logo</div>
</div>
</div>
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li><a href="#" class="selected">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#partners">PARTNERS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- #demo_top_wrapper -->
<!-- everything below is just content to fill the page -->
<section id="main">
<div id="content">
<h1>A navigation menu that stays on top with jQuery</h1>
<p>by <a href="http://www.backslash.gr/">Nikos Tsaganos</a></p>
<p>for more demos like this visit <a href="http://www.backslash.gr/">Backslash.gr</a></p>
<p><strong>Scroll down to see this navigation menu sticking to the top of the page.</strong></p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada convallis mauris in rutrum. Suspendisse dolor lorem, consequat sit amet rutrum at, cursus ut felis. Aliquam pellentesque sodales enim. Vivamus sed adipiscing arcu. Duis tincidunt iaculis lobortis. Sed laoreet mollis tempus. Nam cursus magna in mauris pellentesque vestibulum. Ut non risus a enim pellentesque tincidunt. Maecenas vulputate dolor eu sem convallis convallis. Nulla viverra pharetra tortor, eu adipiscing risus imperdiet a. Nam eu nibh vitae diam accumsan tempus vel eget nisl. Quisque et urna lacus, a mollis ipsum. </p>
<p> Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus. </p>
<p> Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu. </p> <h2 id="about-us">ABOUT US</h2>
<p> Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. </p>
<p> Nam feugiat consequat justo porttitor accumsan. Aenean rutrum felis non odio accumsan vitae volutpat orci tempus. Nam egestas, lectus in dapibus auctor, velit metus placerat urna, dignissim sagittis leo ipsum sit amet augue. Mauris pellentesque, purus varius eleifend interdum, diam lorem venenatis tortor, vel vehicula ligula turpis non ante. Donec in leo diam. Aenean congue fermentum egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo facilisis nisl, non ultricies libero pharetra id. Nulla sollicitudin, tellus sit amet euismod vestibulum, eros tellus posuere eros, quis semper mauris elit ac neque. </p> <h2 id="services">SERVICES</h2>
<p> Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus. </p>
<p> Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu. </p> <h2 id="clients">CLIENTS</h2>
<p> Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus. </p>
<p> Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu. </p> <h2 id="partners"> PARTNERS</h2>
<p>Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. </p>
<p> Nam feugiat consequat justo porttitor accumsan. Aenean rutrum felis non odio accumsan vitae volutpat orci tempus. Nam egestas, lectus in dapibus auctor, velit metus placerat urna, dignissim sagittis leo ipsum sit amet augue. Mauris pellentesque, purus varius eleifend interdum, diam lorem venenatis tortor, vel vehicula ligula turpis non ante. Donec in leo diam. Aenean congue fermentum egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo facilisis nisl, non ultricies libero pharetra id. Nulla sollicitudin, tellus sit amet euismod vestibulum, eros tellus posuere eros, quis semper mauris elit ac neque. </p> <h3 id="contact">CONTACT</h3>
<p> CONTACTMauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus. </p>
<p> Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu. </p>
<p> Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus. </p>
<p> Nam feugiat consequat justo porttitor accumsan. Aenean rutrum felis non odio accumsan vitae volutpat orci tempus. Nam egestas, lectus in dapibus auctor, velit metus placerat urna, dignissim sagittis leo ipsum sit amet augue. Mauris pellentesque, purus varius eleifend interdum, diam lorem venenatis tortor, vel vehicula ligula turpis non ante. Donec in leo diam. Aenean congue fermentum egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam commodo facilisis nisl, non ultricies libero pharetra id. Nulla sollicitudin, tellus sit amet euismod vestibulum, eros tellus posuere eros, quis semper mauris elit ac neque. </p>
</div>
</section>
<!-- #main --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

StickyNav - Script Codes CSS Codes

.demo_container {
width: 980px;
margin: 0 auto;
}
#demo_top_wrapper {
margin: 0 0 20px 0;
}
#demo_top {
height: 100px;
padding: 20px 0 0 0;
}
#my_logo {
font: 70px Georgia, serif;
}
#sticky_navigation_wrapper {
width: 100%;
height: 50px;
}
#sticky_navigation {
width: 100%;
height: 50px;
background: black;
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}
#sticky_navigation ul {
list-style: none;
margin: 0;
padding: 5px;
}
#sticky_navigation ul li {
margin: 0;
padding: 0;
display: inline;
}
#sticky_navigation ul li a {
display: block;
float: left;
margin: 0 0 0 5px;
padding: 0 20px;
height: 40px;
line-height: 40px;
font-size: 14px;
font-family: Arial, serif;
font-weight: bold;
color: #ddd;
background: #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected {
color: #fff;
background: #111;
}
#about-us, #clients, #services, #partners, #contact { padding-top: 3em;
}

StickyNav - Script Codes JS Codes

$(function() {	// grab the initial top offset of the navigation	var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;	// our function that decides weather the navigation bar should have "fixed" css position or not.	var sticky_navigation = function(){	var scroll_top = $(window).scrollTop(); // our current vertical position from the top	// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative	if (scroll_top > sticky_navigation_offset_top) {	$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });	} else {	$('#sticky_navigation').css({ 'position': 'relative' });	}	};	// run our function on load	sticky_navigation();	// and run it again every time you scroll	$(window).scroll(function() { sticky_navigation();	});	// NOT required:	// for this demo disable all links that point to "#"	$('a[href="#"]').click(function(event){	event.preventDefault();	});
});
StickyNav - Script Codes
StickyNav - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 4,306 Kb
Views 20,240
Do you need developer help for StickyNav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Hermans (tomhermans) Script Codes
Name
Styled selectbox
Simple color ribbon
Snappy snippet try
Taming data tables
Portfolio box
CKEditor angular test
Simple circle cutout css
Bulleted list with font-icon snippet
CSS3 Shapes reference
Imagemap pure css trial
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!