I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without success. The current function I've been experimenting with doesn't seem to be doing the trick. How can I resolve this issue?
HTML:
<body>
<script type="text/javascript">
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo1 img').css('width', '50px');
} else {
$('.logo1 img').css('width', '');
}
});
</script>
<div id="layout">
<header id="header" class="header-v1">
<nav class="flat-mega-menu">
<ul class="collapse">
<li class="title">
<div class="nav1">
<div class="logo1">
<a href="index.html">
<img src="img/weblogo.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="index.html">HOME</a></li>
<li> <a href="template-about-2.html">ABOUT US</a></li>
</ul>
</nav>
</header>
</div>
</body>
CSS:
.nav1 {
position: fixed top: 0;
z-index: 1;
width: 100%;
}
.nav1 .logo1 {
position: fixed;
text-align: left;
z-index: 2;
top: 0;
overflow: hidden;
}