JQuery - Easy Sticky Nav Bar

Developer
Eric Tompkins
Size
2,551 Kb
Views
26,312
  1. JQuery - Easy Sticky Nav Bar Previews
  2. JQuery - Easy Sticky Nav Bar HTML Codes
  3. JQuery - Easy Sticky Nav Bar CSS Codes
  4. JQuery - Easy Sticky Nav Bar JS Codes

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 Previews
IQ Test

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();	});	});
JQuery - Easy Sticky Nav Bar - Script Codes
JQuery - Easy Sticky Nav Bar - Script Codes
Home Page Home
Developer Eric Tompkins
Username _codemics
Uploaded August 27, 2022
Rating 3
Size 2,551 Kb
Views 26,312
Do you need developer help for JQuery - Easy Sticky Nav Bar?

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!

Eric Tompkins (_codemics) Script Codes
Name
A Pen by Eric Tompkins
Menu Background Image Rollover
Using Meny.js - Create 3D Nav Effect
3D Rollover Sign-Up Form
JQuery FullScreen Overlay
Responsive Email Template
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!