Sticky nav

Developer
Kevin
Size
5,206 Kb
Views
22,264
  1. Sticky nav Previews
  2. Sticky nav HTML Codes
  3. Sticky nav CSS Codes
  4. Sticky nav JS Codes

How do I make an sticky nav?

What is a sticky nav? How do you make a sticky nav? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Sticky nav Previews
IQ Test

Sticky nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sticky nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="nav--links"> <li> <a href="/" id="logo"><img class="logo" src="https://dl.dropboxusercontent.com/u/47690512/logo.svg" alt="logo"></a> </li> <li class="hidden-xs"><a href="#" class="tel">877-279-1900</a></li> <li class="hidden-xs"> <a href="#" class="btn btn--contact">Contact Us</a> </li> <li><p class="menu--label">MENU</p></li> <li> <div class="hamburger" id="trigger"> <span></span> <span></span> <span></span> </div> </li> </ul>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor diam tincidunt sapien pharetra, ac malesuada arcu placerat. Sed quis lacus eu nisi sodales dictum. Nunc non purus et ex aliquam sodales. Curabitur et felis ullamcorper, egestas massa et, ultricies felis. In imperdiet arcu et lorem gravida, eu porttitor justo ultrices. Donec sed quam rutrum, semper odio sit amet, rutrum magna. Cras in turpis in lorem eleifend porta pretium ut diam. In in rutrum leo, ut sagittis diam. Aliquam eleifend massa metus, dapibus posuere est tincidunt in. Quisque fringilla sollicitudin dictum. Quisque ipsum dolor, aliquet eget sodales venenatis, interdum quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel mattis elit.
Pellentesque suscipit sapien vitae risus vulputate hendrerit. Morbi ut est ut sapien pharetra hendrerit. Nullam volutpat eleifend elit, vitae elementum nibh. Donec vitae leo cursus, pulvinar mi eget, vulputate justo. Maecenas tortor metus, lacinia malesuada orci sed, efficitur fermentum ligula. Morbi varius turpis ligula, eget ullamcorper nunc euismod ac. Quisque tincidunt dictum massa quis hendrerit. Suspendisse auctor varius leo, laoreet vestibulum massa imperdiet in. Ut lobortis lectus et enim aliquam, id ultricies dolor fringilla. Sed consectetur varius dui id auctor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tempor nulla. Nulla ut sagittis augue. Morbi vestibulum ultricies viverra. Sed dapibus neque vel dolor vestibulum, et facilisis sapien lobortis. Nulla porttitor massa diam, ac cursus enim consequat in. Suspendisse vel magna vel felis mollis scelerisque vel sed metus. Curabitur eu est elementum, molestie magna a, consequat diam. Quisque quis erat at felis interdum convallis. In luctus accumsan arcu eget posuere. Integer tristique at eros eget laoreet. Fusce ut blandit sapien.
Phasellus nibh ligula, varius vitae quam sit amet, gravida venenatis libero. Curabitur sit amet ante lectus. Maecenas et egestas nisl. Ut id iaculis lorem, eget ultricies erat. In hac habitasse platea dictumst. Pellentesque sit amet diam in nulla feugiat consequat quis at lacus. Quisque varius sed quam a porttitor. Donec id tellus sit amet sapien cursus sagittis. Sed ut nisi nec est interdum posuere. Vestibulum mollis elit quis nisi blandit dignissim. Phasellus in eleifend tortor, ac pellentesque ex. Donec augue metus, ultrices fringilla condimentum vitae, volutpat quis erat.
Proin efficitur dui vel consectetur eleifend. Cras a tortor ligula. Sed et feugiat lacus, vitae aliquam mi. Aenean ac mollis urna. Nam in aliquet mi. Nunc libero justo, sollicitudin et eros in, elementum ornare erat. Etiam quis egestas turpis, eget rhoncus quam.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor diam tincidunt sapien pharetra, ac malesuada arcu placerat. Sed quis lacus eu nisi sodales dictum. Nunc non purus et ex aliquam sodales. Curabitur et felis ullamcorper, egestas massa et, ultricies felis. In imperdiet arcu et lorem gravida, eu porttitor justo ultrices. Donec sed quam rutrum, semper odio sit amet, rutrum magna. Cras in turpis in lorem eleifend porta pretium ut diam. In in rutrum leo, ut sagittis diam. Aliquam eleifend massa metus, dapibus posuere est tincidunt in. Quisque fringilla sollicitudin dictum. Quisque ipsum dolor, aliquet eget sodales venenatis, interdum quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel mattis elit.
Pellentesque suscipit sapien vitae risus vulputate hendrerit. Morbi ut est ut sapien pharetra hendrerit. Nullam volutpat eleifend elit, vitae elementum nibh. Donec vitae leo cursus, pulvinar mi eget, vulputate justo. Maecenas tortor metus, lacinia malesuada orci sed, efficitur fermentum ligula. Morbi varius turpis ligula, eget ullamcorper nunc euismod ac. Quisque tincidunt dictum massa quis hendrerit. Suspendisse auctor varius leo, laoreet vestibulum massa imperdiet in. Ut lobortis lectus et enim aliquam, id ultricies dolor fringilla. Sed consectetur varius dui id auctor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tempor nulla. Nulla ut sagittis augue. Morbi vestibulum ultricies viverra. Sed dapibus neque vel dolor vestibulum, et facilisis sapien lobortis. Nulla porttitor massa diam, ac cursus enim consequat in. Suspendisse vel magna vel felis mollis scelerisque vel sed metus. Curabitur eu est elementum, molestie magna a, consequat diam. Quisque quis erat at felis interdum convallis. In luctus accumsan arcu eget posuere. Integer tristique at eros eget laoreet. Fusce ut blandit sapien.
Phasellus nibh ligula, varius vitae quam sit amet, gravida venenatis libero. Curabitur sit amet ante lectus. Maecenas et egestas nisl. Ut id iaculis lorem, eget ultricies erat. In hac habitasse platea dictumst. Pellentesque sit amet diam in nulla feugiat consequat quis at lacus. Quisque varius sed quam a porttitor. Donec id tellus sit amet sapien cursus sagittis. Sed ut nisi nec est interdum posuere. Vestibulum mollis elit quis nisi blandit dignissim. Phasellus in eleifend tortor, ac pellentesque ex. Donec augue metus, ultrices fringilla condimentum vitae, volutpat quis erat.
Proin efficitur dui vel consectetur eleifend. Cras a tortor ligula. Sed et feugiat lacus, vitae aliquam mi. Aenean ac mollis urna. Nam in aliquet mi. Nunc libero justo, sollicitudin et eros in, elementum ornare erat. Etiam quis egestas turpis, eget rhoncus quam.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor diam tincidunt sapien pharetra, ac malesuada arcu placerat. Sed quis lacus eu nisi sodales dictum. Nunc non purus et ex aliquam sodales. Curabitur et felis ullamcorper, egestas massa et, ultricies felis. In imperdiet arcu et lorem gravida, eu porttitor justo ultrices. Donec sed quam rutrum, semper odio sit amet, rutrum magna. Cras in turpis in lorem eleifend porta pretium ut diam. In in rutrum leo, ut sagittis diam. Aliquam eleifend massa metus, dapibus posuere est tincidunt in. Quisque fringilla sollicitudin dictum. Quisque ipsum dolor, aliquet eget sodales venenatis, interdum quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel mattis elit.
Pellentesque suscipit sapien vitae risus vulputate hendrerit. Morbi ut est ut sapien pharetra hendrerit. Nullam volutpat eleifend elit, vitae elementum nibh. Donec vitae leo cursus, pulvinar mi eget, vulputate justo. Maecenas tortor metus, lacinia malesuada orci sed, efficitur fermentum ligula. Morbi varius turpis ligula, eget ullamcorper nunc euismod ac. Quisque tincidunt dictum massa quis hendrerit. Suspendisse auctor varius leo, laoreet vestibulum massa imperdiet in. Ut lobortis lectus et enim aliquam, id ultricies dolor fringilla. Sed consectetur varius dui id auctor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tempor nulla. Nulla ut sagittis augue. Morbi vestibulum ultricies viverra. Sed dapibus neque vel dolor vestibulum, et facilisis sapien lobortis. Nulla porttitor massa diam, ac cursus enim consequat in. Suspendisse vel magna vel felis mollis scelerisque vel sed metus. Curabitur eu est elementum, molestie magna a, consequat diam. Quisque quis erat at felis interdum convallis. In luctus accumsan arcu eget posuere. Integer tristique at eros eget laoreet. Fusce ut blandit sapien.
Phasellus nibh ligula, varius vitae quam sit amet, gravida venenatis libero. Curabitur sit amet ante lectus. Maecenas et egestas nisl. Ut id iaculis lorem, eget ultricies erat. In hac habitasse platea dictumst. Pellentesque sit amet diam in nulla feugiat consequat quis at lacus. Quisque varius sed quam a porttitor. Donec id tellus sit amet sapien cursus sagittis. Sed ut nisi nec est interdum posuere. Vestibulum mollis elit quis nisi blandit dignissim. Phasellus in eleifend tortor, ac pellentesque ex. Donec augue metus, ultrices fringilla condimentum vitae, volutpat quis erat.
Proin efficitur dui vel consectetur eleifend. Cras a tortor ligula. Sed et feugiat lacus, vitae aliquam mi. Aenean ac mollis urna. Nam in aliquet mi. Nunc libero justo, sollicitudin et eros in, elementum ornare erat. Etiam quis egestas turpis, eget rhoncus quam.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor diam tincidunt sapien pharetra, ac malesuada arcu placerat. Sed quis lacus eu nisi sodales dictum. Nunc non purus et ex aliquam sodales. Curabitur et felis ullamcorper, egestas massa et, ultricies felis. In imperdiet arcu et lorem gravida, eu porttitor justo ultrices. Donec sed quam rutrum, semper odio sit amet, rutrum magna. Cras in turpis in lorem eleifend porta pretium ut diam. In in rutrum leo, ut sagittis diam. Aliquam eleifend massa metus, dapibus posuere est tincidunt in. Quisque fringilla sollicitudin dictum. Quisque ipsum dolor, aliquet eget sodales venenatis, interdum quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel mattis elit.
Pellentesque suscipit sapien vitae risus vulputate hendrerit. Morbi ut est ut sapien pharetra hendrerit. Nullam volutpat eleifend elit, vitae elementum nibh. Donec vitae leo cursus, pulvinar mi eget, vulputate justo. Maecenas tortor metus, lacinia malesuada orci sed, efficitur fermentum ligula. Morbi varius turpis ligula, eget ullamcorper nunc euismod ac. Quisque tincidunt dictum massa quis hendrerit. Suspendisse auctor varius leo, laoreet vestibulum massa imperdiet in. Ut lobortis lectus et enim aliquam, id ultricies dolor fringilla. Sed consectetur varius dui id auctor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tempor nulla. Nulla ut sagittis augue. Morbi vestibulum ultricies viverra. Sed dapibus neque vel dolor vestibulum, et facilisis sapien lobortis. Nulla porttitor massa diam, ac cursus enim consequat in. Suspendisse vel magna vel felis mollis scelerisque vel sed metus. Curabitur eu est elementum, molestie magna a, consequat diam. Quisque quis erat at felis interdum convallis. In luctus accumsan arcu eget posuere. Integer tristique at eros eget laoreet. Fusce ut blandit sapien.
Phasellus nibh ligula, varius vitae quam sit amet, gravida venenatis libero. Curabitur sit amet ante lectus. Maecenas et egestas nisl. Ut id iaculis lorem, eget ultricies erat. In hac habitasse platea dictumst. Pellentesque sit amet diam in nulla feugiat consequat quis at lacus. Quisque varius sed quam a porttitor. Donec id tellus sit amet sapien cursus sagittis. Sed ut nisi nec est interdum posuere. Vestibulum mollis elit quis nisi blandit dignissim. Phasellus in eleifend tortor, ac pellentesque ex. Donec augue metus, ultrices fringilla condimentum vitae, volutpat quis erat.
Proin efficitur dui vel consectetur eleifend. Cras a tortor ligula. Sed et feugiat lacus, vitae aliquam mi. Aenean ac mollis urna. Nam in aliquet mi. Nunc libero justo, sollicitudin et eros in, elementum ornare erat. Etiam quis egestas turpis, eget rhoncus quam.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor diam tincidunt sapien pharetra, ac malesuada arcu placerat. Sed quis lacus eu nisi sodales dictum. Nunc non purus et ex aliquam sodales. Curabitur et felis ullamcorper, egestas massa et, ultricies felis. In imperdiet arcu et lorem gravida, eu porttitor justo ultrices. Donec sed quam rutrum, semper odio sit amet, rutrum magna. Cras in turpis in lorem eleifend porta pretium ut diam. In in rutrum leo, ut sagittis diam. Aliquam eleifend massa metus, dapibus posuere est tincidunt in. Quisque fringilla sollicitudin dictum. Quisque ipsum dolor, aliquet eget sodales venenatis, interdum quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer vel mattis elit.
Pellentesque suscipit sapien vitae risus vulputate hendrerit. Morbi ut est ut sapien pharetra hendrerit. Nullam volutpat eleifend elit, vitae elementum nibh. Donec vitae leo cursus, pulvinar mi eget, vulputate justo. Maecenas tortor metus, lacinia malesuada orci sed, efficitur fermentum ligula. Morbi varius turpis ligula, eget ullamcorper nunc euismod ac. Quisque tincidunt dictum massa quis hendrerit. Suspendisse auctor varius leo, laoreet vestibulum massa imperdiet in. Ut lobortis lectus et enim aliquam, id ultricies dolor fringilla. Sed consectetur varius dui id auctor.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tempor nulla. Nulla ut sagittis augue. Morbi vestibulum ultricies viverra. Sed dapibus neque vel dolor vestibulum, et facilisis sapien lobortis. Nulla porttitor massa diam, ac cursus enim consequat in. Suspendisse vel magna vel felis mollis scelerisque vel sed metus. Curabitur eu est elementum, molestie magna a, consequat diam. Quisque quis erat at felis interdum convallis. In luctus accumsan arcu eget posuere. Integer tristique at eros eget laoreet. Fusce ut blandit sapien.
Phasellus nibh ligula, varius vitae quam sit amet, gravida venenatis libero. Curabitur sit amet ante lectus. Maecenas et egestas nisl. Ut id iaculis lorem, eget ultricies erat. In hac habitasse platea dictumst. Pellentesque sit amet diam in nulla feugiat consequat quis at lacus. Quisque varius sed quam a porttitor. Donec id tellus sit amet sapien cursus sagittis. Sed ut nisi nec est interdum posuere. Vestibulum mollis elit quis nisi blandit dignissim. Phasellus in eleifend tortor, ac pellentesque ex. Donec augue metus, ultrices fringilla condimentum vitae, volutpat quis erat.
Proin efficitur dui vel consectetur eleifend. Cras a tortor ligula. Sed et feugiat lacus, vitae aliquam mi. Aenean ac mollis urna. Nam in aliquet mi. Nunc libero justo, sollicitudin et eros in, elementum ornare erat. Etiam quis egestas turpis, eget rhoncus quam.</p></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky nav - Script Codes CSS Codes

.logo { height: 60px; width: auto; margin: 1.5em 1em .5em; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
@media (max-width: 767px) { .logo { height: 40px; margin-top: 1em; }
}
.hamburger { background-color: transparent; border: 0; outline: 0; width: 50px; height: auto; position: relative; cursor: pointer; display: block; line-height: 1.3rem;
}
.hamburger span { -webkit-transition: all 0.3s; transition: all 0.3s; height: 5px; width: 100%; display: inline-block; background-color: #e05206;
}
.focus span:first-of-type { -webkit-transform: translate3d(0px, 0px, 0px) rotateZ(45deg); transform: translate3d(0px, 0px, 0px) rotateZ(45deg); -webkit-transform-origin: 5px top; transform-origin: 5px top;
}
.focus span:last-of-type { -webkit-transform: translate3d(0px, 0px, 0px) rotateZ(-45deg); transform: translate3d(0px, 0px, 0px) rotateZ(-45deg); -webkit-transform-origin: 5px bottom; transform-origin: 5px bottom;
}
.focus span:nth-of-type(2) { opacity: 0;
}
.focus span { -webkit-transition: all 0.3s; transition: all 0.3s;
}
.focus span:first-of-type,
.focus span:last-of-type { background-color: #e05206; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; width: 50px;
}
.btn { border-radius: 0; color: #fff; padding: .5em 1.5em; width: auto; margin: 0 auto; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor: pointer; text-align: center;
}
.btn--contact { background: #e05206; border: 3px solid #fff; color: #fff; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.btn--contact:hover { background: #fff; color: #e05206; border: 3px solid #e05206;
}
.nav--links { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100px; -webkit-transition: height .2s ease-in-out; transition: height .2s ease-in-out; -webkit-transform: translateZ(0);
}
.nav--links li:first-child { margin-right: auto;
}
.nav--links li:last-child { margin-right: 20px;
}
.nav--links li { padding-left: 1rem; line-height: 3.2rem; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.nav--links .tel { color: #000; font-size: 1.2em;
}
.menu--label { float: left; display: inline; font-weight: bold; padding-top: 10px;
}
@media (max-width: 767px) { .menu--label { margin-top: .2em; }
}
.sticky { position: fixed; width: 100%; z-index: 100; height: 66px; transform: translate3d(0px, 0px, 0px); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;
}
.sticky .logo { height: 40px; margin-top: 1em;
}

Sticky nav - Script Codes JS Codes

$('#trigger').click(function() {	$(this).toggleClass('focus');
});
$(document).scroll(function(event) {	if ($(this).scrollTop() > 1) {	$('.nav--links').addClass('sticky');	} else {	$('.nav--links').removeClass('sticky');	}	event.preventDefault();
});
Sticky nav - Script Codes
Sticky nav - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 5,206 Kb
Views 22,264
Do you need developer help for Sticky nav?

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!

Kevin (gnarfugh) Script Codes
Name
Ajax Flickr Search
Slider
Mess svg logo
Hamburger
Image slider
Final responsive typography forever
Recommended class
Responsive Table
React Scoreboard
Understanding closures
Create amazing blog posts 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!