Javascript 如何使元素在滚动时更改其字体大小？

我有一个导航栏品牌元素，我想在用户在我的页面上向下滚动后使其变小

<a class="navbar-brand color" href="home.html">Brand</a>

当用户向下滚动时，我希望它自动切换到40px

---

如何做到这一点？

创建一个具有特定

字体大小的类
比如说

.scrollFontSize{
   font-size:60px;
}

使用jquery在滚动时添加类

   $('body').on('scroll', 'someDom', function() {
  // will give position of scrollbar
  var height = $(this).scrollHeight();
  if (height > someDesiredValue) {
    // this will update the font size
    $('.navbar-brand').addClass('scrollFontSize')
  } else if (height === 0) {
    // removing specific font size on scrolling back to top
    $('.navbar-brand').removeClass('scrollFontSize')
  }

})

检查scroll是否达到所需的scrollTop值，然后应用字体大小

$(window).scroll(function(){
  //var height = any value
  if($(this).scrollTop >= height)
    $(".navbar-brand color").css("font-size","40px");
  else
    $(".navbar-brand color").css("font-size","60px");
});

如果要根据滚动设置字体大小的动画，可以尝试

$(window).on('scroll',function(){
    //.05 is a multiplier for the font size
    //14 is the default font size
    $('p').css('font-size',(($(this).scrollTop()*.05)+14)+'px');
});

window.addEventListener('scroll',function(){
  document.querySelector('p').style.fontSize=((document.body.scrollTop*.05)+14)+'px';
});

纯Javascript
这与纯javascript中所做的相同

$(window).on('scroll',function(){
    //.05 is a multiplier for the font size
    //14 is the default font size
    $('p').css('font-size',(($(this).scrollTop()*.05)+14)+'px');
});

window.addEventListener('scroll',function(){
  document.querySelector('p').style.fontSize=((document.body.scrollTop*.05)+14)+'px';
});

window.onscroll=function（）{document.querySelector（'.navbar brand color'）。style.fontSize='40px'}
Tresdin，我如何使它在滚动的下一步激活，而不是立即滚动？您需要更清楚地了解需求。你想再往下走多远？200px？500px？我建议你让他也制作动画Tresdin，初始滚动后约500px。如果您想在纯javascript中执行此操作，该怎么办？您能否向此代码中添加您将如何在纯javascript中执行此操作？您能否向此代码中添加您将如何在纯javascript中执行此操作？