Question

我有一个导航栏品牌元素，我想在用户向下滚动页面后缩小。

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

我将navbar-brand.color设置为：

font-size:60px;

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

如何做到这一点？

Answer 1

创建一个具有您要添加的特定font-size的课程例如

.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')
  }

})

Answer 2

检查滚动时是否达到了所需的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");
});

Answer 3

如果您想根据滚动动画字体大小，可能需要尝试 this demo

$(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');
});

纯Javascript 这与纯javascript DEMO

中完成的操作相同

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

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

3 个答案: