Resize / shrink top navigation menu bar on Scroll in Javascript
How can I resize top navigation menu bar when Scrolling by using Javascript and CSS ? Some elements in the menu I need to enlarge and some of them, I need to shrink.
Hi,
To create a navigation bar that will shrink or enlarge specific elements when scrolling, you can use the CSS and Javascript solution below. You can modify it according to your needs, to resize the image, links, bar height and also choose when and how quick the resizing should occur.
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Verdana;
}
#navigation_bar {
overflow: hidden;
position: fixed;
background-color: #444444;
transition: 0.3s;
width: 100%;
top: 0;
padding: 60px 15px 60px 15px;
z-index: 50;
}
#navigation_bar #logo {
transition: 0.3s;
}
#navigation_bar-links {
float: right;
}
#navigation_bar a {
text-decoration: none;
font-size: 17px;
line-height: 21px;
float: left;
color: #FFFFFF;
text-align: center;
padding: 13px;
}
#navigation_bar a:hover {
color: #208fff;
}
#navigation_bar a.active {
background-color: #208fff;
color: white;
}
</style>
<body>
<div id="navigation_bar">
<a href=""><img src="image.png" alt="logo image" id="logo" /></a>
<div id="navigation_bar-links">
<a href="" class="active">Menu 1</a>
<a href="">Menu 2</a>
<a href="">Menu 3</a>
</div>
</div>
<div style="margin: 200px 15px 2000px 15px;">
Text
</div>
</body>
<script type="text/javascript">
window.onscroll = function() {resizeNavigationBar()};
function resizeNavigationBar() {
if (document.documentElement.scrollTop > 60 || document.body.scrollTop > 60) {
document.getElementById("navigation_bar").style.padding = "30px 15px 30px 15px";
document.getElementById("logo").style.width = "125px";
} else {
document.getElementById("navigation_bar").style.padding = "60px 15px 60px 15px";
document.getElementById("logo").style.width = "160px";
}
}
</script>
To create a navigation bar that will shrink or enlarge specific elements when scrolling, you can use the CSS and Javascript solution below. You can modify it according to your needs, to resize the image, links, bar height and also choose when and how quick the resizing should occur.
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Verdana;
}
#navigation_bar {
overflow: hidden;
position: fixed;
background-color: #444444;
transition: 0.3s;
width: 100%;
top: 0;
padding: 60px 15px 60px 15px;
z-index: 50;
}
#navigation_bar #logo {
transition: 0.3s;
}
#navigation_bar-links {
float: right;
}
#navigation_bar a {
text-decoration: none;
font-size: 17px;
line-height: 21px;
float: left;
color: #FFFFFF;
text-align: center;
padding: 13px;
}
#navigation_bar a:hover {
color: #208fff;
}
#navigation_bar a.active {
background-color: #208fff;
color: white;
}
</style>
<body>
<div id="navigation_bar">
<a href=""><img src="image.png" alt="logo image" id="logo" /></a>
<div id="navigation_bar-links">
<a href="" class="active">Menu 1</a>
<a href="">Menu 2</a>
<a href="">Menu 3</a>
</div>
</div>
<div style="margin: 200px 15px 2000px 15px;">
Text
</div>
</body>
<script type="text/javascript">
window.onscroll = function() {resizeNavigationBar()};
function resizeNavigationBar() {
if (document.documentElement.scrollTop > 60 || document.body.scrollTop > 60) {
document.getElementById("navigation_bar").style.padding = "30px 15px 30px 15px";
document.getElementById("logo").style.width = "125px";
} else {
document.getElementById("navigation_bar").style.padding = "60px 15px 60px 15px";
document.getElementById("logo").style.width = "160px";
}
}
</script>
1 answer
Related questions
Remove or hide bottom navigation bar with buttons on Android
How to add new line breaks in textarea using Javascript ?
Prevent typing whitespace / disable spacebar in input - Javascript
Different background color for Odd / Even table rows - CSS
onSubmit return false not working - submit form by Javascript
Set cookies to expire in hours, minutes, seconds - Javascript
CSS font-size units PX to PT, IN, EM, REM conversion
When Enter, Backspace, Spacebar keys are pressed - Javascript
Get cursor postion in characters in textarea - Javascript
Javascript alert popup with two buttons OK / Cancel or Yes / No
Trending questions
How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android How to change QWERTZ keyboard to QWERTY in Windows 10 ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Man Month calculation - how many man days or man hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Free email accounts with large or unlimited storage capacity Send crypto from Binance to Trust Wallet.How long does it take? Twitter account is suspended - What to do ? How to unsuspend it ?
How to calculate inverse currency exchange rate ? How to add side by side rows in excel pivot table ? Remove or hide bottom navigation bar with buttons on Android How to change QWERTZ keyboard to QWERTY in Windows 10 ? Is PLS LCD display good ? Difference between PLS LCD and Amoled Man Month calculation - how many man days or man hours ? Samsung Galaxy A & F better than M series ? What's the difference ? Free email accounts with large or unlimited storage capacity Send crypto from Binance to Trust Wallet.How long does it take? Twitter account is suspended - What to do ? How to unsuspend it ?
2024 AnswerTabsTermsContact us