提问者:小点点

在滚动到每个段落时,增加大小,在滚动不在段落中时,使用jquery减小大小


我只想增加每一段的字体大小,当滚动靠近他们,并减少后,滚动是下降。

null

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.title').css('font-size', '43px');
        } else {
            $('.title').css('font-size', '36px');
        }
    });
    
});

null


共1个答案

匿名用户

在这种情况下,element.getBoundingClientRect可以帮助您。遍历每个.title,然后相应地调整大小。

您可以查看CSS转换属性来调整字体大小的速度。

$(document).ready(function () {

    $(window).scroll(function(){
        $('.title').each(function(){
          if (this.getBoundingClientRect().top < 100) {
              $(this).css('font-size', '43px');
          } else {
              $(this).css('font-size', '36px');
          }
        });
    });
    $(window).scroll();
});
body{
  height: 1000px;
}

.title {
  font-size: 36px;
  margin-bottom: 100px;
  transition: font-size 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>
<div class="title">Hello world</div>