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

【问题标题】：Can't reduce font-size in navbar when scrolling滚动时无法减小导航栏中的字体大小
【发布时间】：2020-02-24 17:26:03
【问题描述】：

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

由于我不想单独定位每个链接文本，因此我尝试设置一个类并使用 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;
}

【问题讨论】：

任何 console.error？
getElementsByClassName("nav-link .topItem") 无效。首先因为类名只需要用空格分隔，不包括.前缀，其次因为参数不是选择器；这是要查找的各个类的列表。我建议使用querySelectorAll() 并循环查看结果。或者，您可以使用 jQuery 简化这一切，因为您已经标记了它
这里可以用jQuery吗？
可能是我对这段代码做了太多改动，以至于我不知道什么是 jQuery，什么是纯 js。

标签： javascript jquery

【解决方案1】：

看起来您正在将 jQuery 语法与纯 JavaScript 混合。尝试将设置 scrollFontSize 类的行替换为：

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

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

【讨论】：

我确定。当我尝试几种解决方案并忘记在每个解决方案之间重置时会发生。你的建议没有用，但是我要回去研究 jQuery。奇怪的是，我找不到这个函数的任何 jQuery 示例，因为我从查看实际代码示例中学到了更多......

【解决方案2】：

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

【讨论】：