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.
0
give a positive ratinggive a negative rating
11 Jan 2020 at 01:39 PM
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>


0
give a positive ratinggive a negative rating
01 Sep 2020 at 02:43 PM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
Follow us on Facebook
2022 AnswerTabsTermsContact us