Làm cách nào để thay đổi kích thước thanh điều hướng khi cuộn bằng CSS và JavaScript?

Sau đây là mã để thay đổi kích thước thanh điều hướng khi cuộn bằng CSS và JavaScript -

Ví dụ

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