导航工具栏 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>