滚动到每个段落增加大小，滚动后不在段落中减少jquery的大小

Question

我只想在滚动接近它们时增加每个段落的字体大小，在滚动关闭后减少。

＆＃13;

＆＃13;

$(document).ready(function () {

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，

element.getBoundingClientRect可以帮助您。迭代每个.title，然后相应地调整大小。

更新

您可以查看CSS transition属性来调整字体调整速度。

＆＃13;

＆＃13;

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

＆＃13;

body{
  height: 1000px;
}

.title {
  font-size: 36px;
  margin-bottom: 100px;
  transition: font-size 1s;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;