如何解决动态更改页面滚动样式
随着页面滚动,我想更改 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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。