我已经设法整理了一些代码，可以让我的导航栏在用户滚动时缩小，但是我也希望导航链接减小字体大小，但我似乎遗漏了一些东西，无论我如何编写我的代码。
因为我不想单独定位每个链接文本，所以我尝试设置一个类并使用 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;
}
最后，我偶然发现了解决我的问题的方法。在此线程的第二篇文章中有一个指向可能解决方案的 Codepen 链接：https ://css-tricks.com/forums/topic/change-font-size-while-scrolling/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句