滾動時無法減小導航欄中的字體大小

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/