Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to resize a navigation bar on scroll with CSS and JavaScript?
In this article going to 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 usually the first pit-stop for the users visiting the website who seek guidance to walk through the website.
Resizing is the same as hiding and showing the navigation. Here, we just need to increase the padding, and size of the navigation bar with the help of JavaScript.
In this example we are creating a webpage displaying “navigation bar”. A menu with 4 options into the current page.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required text, a navigation bar and empty navigation Links for the menu.
<body>
<!-- HTML CODE -->
<div id="navbar">
<a href="#default" id="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: Verdana, Geneva, Tahoma, sans-serif;">
<p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
<p class="para">to show the effect scroll down and remove the effect scroll up.</p>
</div>
Example.css
Add css style to give background and hover effect on the slidable navigation bar for a better look. In this example we are styling the link of navigation bar if we hover on the link background color will be change and also adding active class on the home link.
<style>
/*styling*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #5f5151;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
color: white;
}
#navbar a:hover {
background-color: rgb(94, 250, 211);
color: black;
}
#navbar a.active {
background-color: rgb(31, 214, 150);
color: rgb(11, 10, 10);
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 10px 10px;
}
#navbar a {
float: left;
display: block;
text-align: left;
}
#navbar-right {
float: right;
}
.para {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: small;
}
}
</style>
Example.js
In this example we are adding the scrolling effect, if the page will be scrolled more than or equal to 80 then the navigation bar will become small in size and the content will have hidden, from the page.
Observe the following javascript code for better understanding.
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "30px";
}
}
</script>
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*styling*/
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: #5f5151;
padding: 50px 10px;
transition: 0.5s;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
color: white;
}
#navbar a:hover {
background-color: rgb(94, 250, 211);
color: black;
}
#navbar a.active {
background-color: rgb(31, 214, 150);
color: rgb(11, 10, 10);
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 10px 10px;
}
#navbar a {
float: left;
display: block;
text-align: left;
}
#navbar-right {
float: right;
}
.para {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: small;
}
}
</style>
</head>
<body>
<!-- HTML CODE -->
<div id="navbar">
<a href="#default" id="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: Verdana, Geneva, Tahoma, sans-serif;">
<p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
<p class="para">to show the effect scroll down and remove the effect scroll up.</p>
</div>
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "30px";
}
}
</script>
</body>
</html>
2K+ Views
