Introduction
Sticky headers are a popular feature on modern websites. They stay visible at the top of the page even as you scroll down. In this guide, we’ll learn how to create a sticky header with a swing animation using HTML, CSS, and JavaScript — no libraries or frameworks required. The header will appear when the user scrolls down and hide when they scroll up.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
📁 Lets Create a Folder Structure
project-folder/
├── index.html
├── style.css
└── script.js
Read also: Create a Website with Scroll Animations Using GSAP ScrollTrigger
Source Code
HTML Code Structure
Create an index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On Scroll Sticky Header with Swing Animation using HTML CSS and JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="script.js"></script>
</body>
</html>
What’s added?
- We have a <header>tag that will become sticky on the scroll.
- The <main> tag contains content to create scrollable space.
CSS Code Structure
Open style.css and add the following code:
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
JavaScript Code Structure
Now, let’s write JavaScript that shows the header when the user scrolls down and hides it when they scroll up.
In your script.js file:
< // JavaScript Code >
Read also: Animated Landing Page with Responsive – HTML CSS and JS
✅ Final Output
When you open the HTML file in your browser:
- Scroll down — the header will hide.
- Scroll up — the header will swing into view.
- The swing animation adds a playful effect every time the header reappears.
🔄 Optional Improvements
Here are a few ways you can improve this basic project:
- Add a box-shadow to the header when visible to separate it from the background.
- Make the swing animation more subtle or more dramatic.
- Use requestAnimationFrame for smoother scroll detection.
- Add throttling or debouncing for better performance.
Conclusion
In this tutorial, you’ve learned how to create a sticky header that appears on scroll, animate it using CSS @keyframes, and detect scroll direction using JavaScript.
By understanding this, you can enhance the user experience—especially on long web pages—by keeping navigation accessible without obstructing the content. If you’d like, I can also help you make it responsive or add a hamburger menu for mobile devices.
14 people bought this
Hurry, Get it Now for Only 20 ₹50
