सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर नेविगेशन बार का आकार कैसे बदलें?

सीएसएस और जावास्क्रिप्ट का उपयोग करते हुए स्क्रॉल पर नेविगेशन बार का आकार बदलने के लिए निम्नलिखित कोड है -

उदाहरण

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*,
*::before,
*::after {
   box-sizing: border-box;
}
body {
   margin: 0px;
   margin-top: 60px;
   padding: 0px;
}
nav {
   position: fixed;
   top: 0px;
   width: 100%;
   background-color: rgb(39, 39, 39);
   overflow: auto;
   height: auto;
   transition: 0.5s;
   padding: 50px 10px;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(178, 137, 253);
   text-decoration: none;
   font-size: 17px;
}
.links:hover {
   background-color: rgb(100, 100, 100);
}
.selected {
   background-color: rgb(0, 18, 43);
}
.sample-content {
   height: 150vh;
}
.company-logo {
   font-size: 50px;
   color: white;
   position: absolute;
   right: 30px;
   transition: 0.3s;
}
</style>
</head>
<body>
<nav>
<a class="company-logo">€</a>
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<div class="sample-content">
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
</div>
<script>
window.onscroll = scrollShowNav;
function scrollShowNav() {
   if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
   )
   {
      document.getElementsByTagName("nav")[0].style.padding = "10px 10px";
      document.querySelector(".company-logo").style.fontSize = "20px";
   } else {
      document.getElementsByTagName("nav")[0].style.padding = "40px 50px";
      document.querySelector(".company-logo").style.fontSize = "50px";
   }
}
</script>
</body>
</html>