时间戳

首页 > 解决方案 > 页面滚动时动态更改样式

jquery - 页面滚动时动态更改样式

问题描述

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

我以为我的 codepen 可以工作，但显然不行，我也不确定是否以及如何使每个 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>

标签： jquerycssinline-styles

解决方案

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

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

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

.scrolled {
  font-size: 3rem;
}

再次，非常抱歉，如果我没有正确理解你，我是新来的

推荐阅读