在页面滚动时动态更改样式

Question

随着页面的滚动，我想改变H1中的字体间距。

我认为我的代码笔可以工作，但显然不行，我也不确定是否以及如何让每个 H1 的样式都不同

理想情况下，我喜欢这样，所以越靠近页面顶部，每个 H1 的间距就越小：

<h1 style="letter-spacing:3px">this is the Title</h1>
<h1 style="letter-spacing:7px">this is the Title</h1>
<h1 style="letter-spacing:11px">this is the Title</h1>
<h1 style="letter-spacing:13px">this is the Title</h1>

https://codepen.io/steven-david-reid/pen/vYXWNYK

var $output = $("h1");

$(window).on('scroll', function() {
  var scrollTop = $(window).scrollTop(),
    elementOffset = $("h1").offset().top,
    distance = (elementOffset - scrollTop);
  $('$output').css({
    'letter-spacing': distance
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>
<h1>this is the Title</h1>
<br><br><br><br>

Answer 1

我不确定你的意思，但如果你的意思是你希望当页面从顶部滚动时改变 h1 大小，那么你可以这样做...

$(function () {
  $(document).scroll(function () {
    var $nav = $("#yourH1");
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
  });
});

并将滚动的 class 添加到 css 示例：

.scrolled {
  font-size: 3rem;
}

再次抱歉，如果我没有正确理解您的意思，我是新来的

Answer 2

你的CodePen可以用了，只是你的JS有点小错误。而不是$('$output').css({'letter-spacing': distance})，应该是$output.css({'letter-spacing': distance})

编辑： 目标是在我们滚动时文本越靠近页面顶部，字母间距越大，收敛到零。请注意 Math.max($(this).offset().top - scrollTop, 0) 用于确保字母间距不会变为负数。然后除以20；这是一个任意数字，只是为了缩小字母间距，因为距离非常大。

var $output = $("h1");

function changeLetterSpacing() {
    var scrollTop     = $(window).scrollTop(),
        elementOffset = $("h1").offset().top;
    $output.css('letter-spacing', function(d) { 
        return Math.max($(this).offset().top - scrollTop, 0)/20 + "px"; 
    })
}

$(window).on('scroll', function () {
    changeLetterSpacing();
});
changeLetterSpacing();

在页面滚动时动态更改样式

Dynamically change style on page scroll

css

jquery

inline-styles