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

Question

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

null

$(document).ready(function () {

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

null

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