滚动时无法减小导航栏中的字体大小

Question

我已经设法整理了一些代码，可以让我的导航栏在用户滚动时缩小，但是我也希望导航链接减小字体大小，但我似乎遗漏了一些东西，无论我如何编写我的代码。

因为我不想单独定位每个链接文本，所以我尝试设置一个类并使用 getElementsByClassName 和使用 style.fontsize 定位该类。 我还尝试创建一个 CSS 类并在滚动时应用它。

这是我的js代码：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbarTop").style.padding = "10px 0px";
    document.getElementById("logo").style.width = "40%";
    document.getElementsByClassName("nav-link .topItem").addClass('scrollFontSize');
  } else {
 document.getElementById("navbarTop").style.padding = "40px 10px";
    document.getElementById("logo").style.width = "50%";
  }
}

这是 HTML：

<div class="collapse navbar-collapse" id="navbarToggler">

    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item ml-auto active">
            <a class="nav-link topItem" href="#">HEM<span class="sr-only"> (Aktiv)</span></a>
        </li>
        <li class="nav-item ml-auto">
            <a class="nav-link topItem" href="#">BLOGG</a>
        </li>
        <li class="nav-item ml-auto">
            <a class="nav-link topItem" href="#">RESURSER</a>
        </li>
        <li class="nav-item ml-auto">
            <a class="nav-link topItem" href="#">KONTAKT</a>
        </li>
    </ul>

</div>

和 CSS：

.scrollFontSize {
    font-size: 12px;
}

Answer 1

看起来您正在将 jQuery 语法与纯 JavaScript 混合使用。 尝试用以下内容替换设置 scrollFontSize 类的行：

document.querySelectorAll("a.nav-link, a.topItem").forEach(function(childElement){
    childElement.classList.add('scrollFontSize');
});

更好的解决方案是使用 jQuery。

Answer 2

最后，我偶然发现了解决我的问题的方法。 在此线程的第二篇文章中有一个指向可能解决方案的 Codepen 链接： https ://css-tricks.com/forums/topic/change-font-size-while-scrolling/