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>

和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/

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

2 个答案: