动态更改页面滚动样式

问题描述

随着页面滚动，我想更改 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>

解决方法

我不确定您的意思，但是如果您的意思是希望在从顶部滚动页面时更改 h1 大小，那么您可以执行此操作...

        Xamarin.Forms.Device.BeginInvokeOnMainThread(async () =>
        {
            var navService = FreshIOC.Container.Resolve<IFreshNavigationService>(FreshMvvm.Constants.DefaultNavigationServiceName);
            Page page = FreshPageModelResolver.ResolvePageModel<SomePageModel>();
            await navService.PushPage(page,null);

    ...
        });

并将滚动类添加到 css 例子：

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

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

,

您的 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();