Creating a shrink header on scroll is a common web design technique that enhances the user experience by making the navigation bar more compact as the user scrolls down the page. This design not only saves screen space but also keeps the essential navigation links accessible without distraction. Implementing this feature involves the use of HTML for the structure, CSS for styling, and JavaScript to handle the scrolling behavior.
In this article, we will explore how to create a shrink header that reduces its height smoothly when the user scrolls down the page. We will start by setting up a basic HTML structure for the header and the content of the page. Next, we will use CSS to style the header, defining both its expanded and shrunken states. Finally, we will add JavaScript to detect the scroll event and apply the appropriate class to the header to trigger the shrinking effect.
By the end of this tutorial, you will have a functional shrink header that enhances your webpage’s usability and aesthetics. This guide is suitable for both beginners and experienced developers looking to add a polished touch to their website.
There is two essential parts for this effect
Creating Structure: In the HTML section, we will set up a basic website layout with a navbar that will shrink as the user scrolls down the page, displaying the shrink effect.
Designing Structure: In the CSS and JavaScript sections, we will style the navbar and implement the scroll-down effect using JavaScript to make the navbar shrink smoothly.
Full Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content
="width=device-width, initial-scale=1">
<title>
How to Create Shrink Header on Scroll
using HTML, CSS and JavaScript ?
</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Navlist designing */
#navlist {
overflow: hidden;
background-color: #0074D9;
padding: 90px 10px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navlist a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navlist #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navlist a:hover {
color: #01FE06;
}
#navlist-right {
float: right;
}
/* Content design */
.content {
margin-top:220px;
padding:15px 15px 1800px;
font-size:22px;
}
</style>
<script>
// Scrolls down 90px from the top of
// the document, to resize the navlist
// padding and the title font-size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 90 ||
document.documentElement.scrollTop > 90)
{
document.getElementById("navlist")
.style.padding = "25px 10px";
document.getElementById("logo")
.style.fontSize = "24px";
}
else {
document.getElementById("navlist")
.style.padding = "90px 10px";
document.getElementById("logo")
.style.fontSize = "35px";
}
}
</script>
</head>
<body>
<!-- Navlist of header -->
<div id="navlist">
<a href="#default" id="logo">
CODEMAGNET
</a>
<div id="navlist-right">
<a href="#home">Home</a>
<a href="#about">Our Products</a>
<a href="#about">Careers</a>
<a href="#contact">Contact US</a>
<a href="#about">About US</a>
</div>
</div>
<!-- Page Content -->
<div class="content">
<b>
A coding portal for all enthusiastic
</b>
<p>
Welcome to your ultimate coding portal, where enthusiasts of all levels come to learn, share, and grow! Dive into a wealth of resources, tutorials, and community support to fuel your programming passion. #CodeOn #LearnToCode 🚀💻
</p>
</div>
</body>
</html>
Output:
Explanation of the above code:
HTML Structure
- DOCTYPE Declaration and HTML Tag:
- Declares the document type and starts the HTML document.
- Head Section:
- Sets the viewport for responsiveness.
- Sets the title of the web page.
- CSS Styling:
- Applies box-sizing to all elements.
- Removes default margin from the body.
- Styles the navigation bar with background color, padding, transition, and fixed position.
- Styles the navigation links with color, text alignment, padding, font size, line height, and hover effects.
- Styles the logo with font size, bold weight, and transition effect.
- Positions the navigation links to the right.
- Styles the page content with margin and padding.
- JavaScript for Scroll Effect:
- Adds an onscroll event to resize the navigation bar padding and logo font size when scrolling down 90px from the top of the document.
- Body Section:
- Contains the navigation bar with links and a logo.
- Contains the page content with a title and a welcome paragraph.
Conclusion
Creating a shrinkable header on scroll using HTML, CSS, and JavaScript enhances the user experience by saving screen space and maintaining essential navigation links accessible. By utilizing CSS for styling and JavaScript for functionality, this dynamic effect can be efficiently implemented. The process involves setting up a responsive layout, styling the navigation bar, and using JavaScript to adjust the navbar’s appearance upon scrolling. This technique is a valuable addition to any web development project, offering both aesthetic appeal and practical navigation benefits.
Leave a Reply