JQuery - Easy Sticky Nav Bar
How do I make an jquery - easy sticky nav bar?
Create an easy sticky nav bat with Jquery and CSS.. What is a jquery - easy sticky nav bar? How do you make a jquery - easy sticky nav bar? This script and codes were developed by Eric Tompkins on 27 August 2022, Saturday.
JQuery - Easy Sticky Nav Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JQuery - Easy Sticky Nav Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="wrapper"> <div class="header">
HEADER CONTENT </div> <div class="nav"> WHATEVER YOU WANT TO BE STICKY </div> <div class="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JQuery - Easy Sticky Nav Bar - Script Codes CSS Codes
body { margin: 0; padding: 0;
}
.header { padding: 25px 0; background-color: #000;
}
.nav { padding: 25px 0; background-color: red; position: -webkit-sticky;
}
.header, .nav { text-align: center; color: #fff;
}
.content { width: 600px; margin: 10px auto 100px;
}
.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0;
}
JQuery - Easy Sticky Nav Bar - Script Codes JS Codes
$(document).ready(function() { // grab the initial top offset of the navigation var stickyNavTop = $('.nav').offset().top; // our function that decides weather the navigation bar should have "fixed" css position or not. var stickyNav = function(){ var scrollTop = $(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 (scrollTop > stickyNavTop) { $('.nav').addClass('sticky'); } else { $('.nav').removeClass('sticky'); } }; stickyNav(); // and run it again every time you scroll $(window).scroll(function() { stickyNav(); }); });
Developer | Eric Tompkins |
Username | _codemics |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,551 Kb |
Views | 26,312 |
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!
Name | Size |
JQuery - Easy Sticky Nav Bar | 2,551 Kb |
3D Rollover Sign-Up Form | 3,727 Kb |
JQuery FullScreen Overlay | 2,252 Kb |
Menu Background Image Rollover | 2,147 Kb |
A Pen by Eric Tompkins | 1,243 Kb |
Responsive Email Template | 4,175 Kb |
Using Meny.js - Create 3D Nav Effect | 3,191 Kb |
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!
Name | Username | Size |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Boxes | H3l1um | 2,563 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!