JQuery scrollTop sticky header

Developer
Ken Yiu
Size
2,776 Kb
Views
12,144
  1. JQuery scrollTop sticky header Previews
  2. JQuery scrollTop sticky header HTML Codes
  3. JQuery scrollTop sticky header CSS Codes
  4. JQuery scrollTop sticky header JS Codes

How do I make an jquery scrolltop sticky header?

What is a jquery scrolltop sticky header? How do you make a jquery scrolltop sticky header? This script and codes were developed by Ken Yiu on 18 November 2022, Friday.

JQuery scrollTop sticky header Previews
IQ Test

JQuery scrollTop sticky header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery scrollTop sticky header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="header-container"> <div class="logo-container"> <i class="fa fa-user-secret"></i> </div>
</div>
<div class="page-container"> <div class="section" id="section1"></div> <div class="section" id="section2"> <div class="section-content"> <h1>Dummy Content</h1> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p> </div> </div> <div class="section" id="section3"> <div class="section-content"> <h1>Dummy Content</h1> <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p> </div> </div>
</div> <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 scrollTop sticky header - Script Codes CSS Codes

* { box-sizing: border-box;
}
.p { margin: 0; padding: 0;
}
body { background-color: #ccc;
}
.header-container { position: fixed; width: 100%; height: 80px; transition: all 0.3s ease-in-out;
}
.logo-container { width: 200px; height: 100px; font-size: 60px; padding: 20px 40px; transition: all 0.3s ease-in-out;
}
.header-container.scrolled { background-color: rgba(0,0,0,0.8); height: 60px;
}
.logo-container.scrolled { font-size: 40px; color: #fff; padding: 10px 20px;
}
.section { width: 100%; min-height: 400px;
}
#section1 { background-color: #B8336A; background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQUJxweWizA7A0H3aMi1QADcBbMqzOKUA6vbqSPA9isMAEW5_xcpg'); background-size: cover; background-position: center;
}
#section2 { background-color: #A0D2DB;
}
#section3 { background-color: #C490D1;
}
.section-content { width: 90%; margin: 0 auto; padding: 50px;
}

JQuery scrollTop sticky header - Script Codes JS Codes

$(function(){
var headerScrolled = false;
$(window).scroll(function(){ if ($(window).scrollTop() > 100) { $('.header-container').addClass('scrolled'); $('.logo-container').addClass('scrolled'); } if ($(window).scrollTop() < 100) { $('.header-container').removeClass('scrolled'); $('.logo-container').removeClass('scrolled'); }
});
});
JQuery scrollTop sticky header - Script Codes
JQuery scrollTop sticky header - Script Codes
Home Page Home
Developer Ken Yiu
Username kenyiu
Uploaded November 18, 2022
Rating 3
Size 2,776 Kb
Views 12,144
Do you need developer help for JQuery scrollTop sticky header?

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!

Ken Yiu (kenyiu) Script Codes
Name
RWD-ISD-A-FullPage Start Kit
SD3100 FullPage Starter Kit
Create One Page Design - Step 01
A Pen by Ken Yiu
RWD-ISD-A-Class05
Dynamic Content Panel
Jquery mousemove animation
RWD-ISD-B-Class4b
RWD-ISD-ClassA-9A
Responsive Flexbox Nav
Create amazing art & images 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!