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.
11 Jan 2020 at 01:39 PM
0pnshow more
zeddzedd
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.


navigation menu bar logo shrink on scrolling css javascript

<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>


01 Sep 2020 at 02:43 PM
0pnshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2022 AnswerTabsTermsContact us