Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to resize a navigation bar on scroll with CSS and JavaScript?
In this article, we will discuss how to resize a navigation bar on scroll with the help of CSS and JavaScript.
A navigation bar contains the list of elements present in your website, including the links to navigate through the website. It's usually the first pit-stop for users visiting the website who seek guidance to walk through the website.
Resizing is achieved by dynamically changing the padding and font sizes of the navigation bar elements using JavaScript when the user scrolls. This creates a smooth transition effect that makes the navbar smaller as the user scrolls down.
HTML Structure
First, let's create the HTML structure for our navigation bar with a logo and menu items:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="navbar">
<a href="#default" id="logo">LOGO</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px;">
<p><strong>This example demonstrates how to shrink a navigation bar when the user starts to scroll.</strong></p>
<p>Scroll down to see the effect, scroll up to restore original size.</p>
</div>
</body>
</html>
CSS Styling
Add CSS styles to create the initial navbar appearance and smooth transition effects:
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #333;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #04AA6D;
color: white;
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
</style>
JavaScript Scroll Function
The JavaScript code detects scroll events and adjusts the navbar size based on scroll position:
<script>
// When the user scrolls down 80px from the top, resize the navbar
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
// Shrink navbar
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
// Restore original size
document.getElementById("navbar").style.padding = "50px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
</script>
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #333;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #04AA6D;
color: white;
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
</style>
</head>
<body>
<div id="navbar">
<a href="#default" id="logo">LOGO</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px; font-family: Arial, sans-serif;">
<p><strong>This example demonstrates how to shrink a navigation bar when the user starts to scroll.</strong></p>
<p>Scroll down to see the effect, scroll up to restore the original size.</p>
</div>
<script>
// When the user scrolls down 80px from the top, resize the navbar
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
// Shrink navbar
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
// Restore original size
document.getElementById("navbar").style.padding = "50px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
</script>
</body>
</html>
How It Works
The script monitors the window.onscroll event and checks if the user has scrolled more than 80 pixels from the top. When this threshold is reached, it reduces the navbar padding from 50px to 10px and shrinks the logo font size from 35px to 20px. The CSS transition: 0.5s property creates a smooth animation effect.
Key Features
- Smooth transitions: CSS transitions provide fluid resizing animation
- Responsive design: Media queries ensure mobile compatibility
- Fixed positioning: Navbar stays visible while scrolling
- Cross-browser support: Works with different scroll implementations
Conclusion
This technique creates an engaging user experience by dynamically resizing the navigation bar on scroll. The combination of CSS transitions and JavaScript scroll detection provides a professional, modern website navigation solution.
3K+ Views
