gpt4 book ai didi

javascript - 在滚动上添加 offset().top 金额

转载 作者:行者123 更新时间:2023-12-03 03:22:50 26 4
gpt4 key购买 nike

我有一段固定的文本,每次文本进入滚动的 div 时我都会尝试添加不同的类。我用起来没问题。但是如果我向固定文本添加偏移量,例如

top: 400px

我需要在 JS 中抵消这个偏移量。但我似乎无法弄清楚。我尝试过使用:

.offset().top 400);

但是它不起作用。这是我当前正在使用的代码:

HTML

<p class="text">TEXT HERE</p>

<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>

JS

$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
$('.text').toggleClass('blue',
scroll >= $('.section1').offset().top
);
$('.text').toggleClass('magenta',
scroll >= $('.section2').offset().top
);
$('.text').toggleClass('green',
scroll >= $('.section3').offset().top
);
$('.text').toggleClass('orange',
scroll >= $('.section4').offset().top
);
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

文本一进入相关div就需要添加class。

这是一个工作 fiddle :http://jsfiddle.net/6PrQW/334/

最佳答案

所以你做的大部分事情都是正确的,但我认为你出错的地方在这里:varscroll = $(window).scrollTop();

您不想使用窗口偏移量进行计算,而是想使用粘性文本的偏移量。因此,请改用: varscroll = $('.text').offset().top;

请告诉我这是否有帮助。

编辑,和 here是你对编辑的摆弄。请注意,我编辑了您的行以设置蓝色类,因为您不想将粘性偏移量与其自身相匹配。

关于javascript - 在滚动上添加 offset().top 金额,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46495343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com