导航工具栏 HTML 使用 JS 更改字体大小和填充

Question

我正在尝试用 HTML 制作我的第一个网站，只是为了好玩。 https://dennisklad.github.io/BeanyBean/Bean%20Folder/ 我设法使顶部的导航栏通过滚动缩小。我现在无法在#navbar a 中专门更改项目，导航栏 a:hover 和 #navbar a.active。脚本不改变整个 id="navbar" 的代码是什么？<div class="container">        <div id="navbar">            <a href="#home" class="active">Home</a>            <a href="#news">News</a>            <a href="#contact">Contact</a>            <div id="nav-right">                <a href="#search">Search</a>                <a href="#about">About</a>            </div>        </div>    </div><script>    window.onscroll = function() {scrollFunction()};    function scrollFunction() {        if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {            document.getElementById("navbar").style.padding = "0px 0px";            document.getElementById("navbar").style.fontSize = "20px";        } else {            document.getElementById("navbar").style.padding = "30px 0px";            document.getElementById("navbar").style.fontSize = "30px";            document.getElementById("navbar").getElementsByClassName("a").style.paddingBottom = "100px"        }    }</script>