gpt4 book ai didi

javascript - 如何在用户滚动经过某个 div 时更改 CSS

转载 作者:太空狗 更新时间:2023-10-29 16:49:24 31 4
gpt4 key购买 nike

我正在尝试实现一个滚动功能,它根据用户滚动的位置移动元素,这段代码目前有效并且确实移动了元素。

问题是我想要一个不同函数的列表,当你根据它的 id 或类滚动经过某个 div 时,它会移动特定元素。

我想如果我改变 $("#pagelight2").scrollTop() 它会起作用,但没有帮助

任何指导将不胜感激

谢谢

更新后的代码有效,但每当我向上滚动动画停止移动时,它确实会出现故障 - 有人知道更有效的方法来让它工作吗?

    var $scrollingDiv = $(".Page3-PeopleWalkingDown");

var p = $("#pagedark3");

var offset = p.offset();

var top = offset.top;

$(window).scroll(function() {

var scrollval = $(window).scrollTop() - top;

if ($(window).scrollTop() > 1400) {
$scrollingDiv
.stop()
.animate({
"left": "-" + (scrollval) + "px"
});

} else


{

$scrollingDiv
.stop()
.animate({
"left": +(0) + "px"
});
}

最佳答案

您需要做的是计算每个特定 DIV 相对于页面顶部或可滚动区域的偏移高度。

然后,使用您的 .scroll() 函数,当达到偏移量时(即“div”偏移量与“滚动”位置匹配),您可以关闭动画。

此外,(基于稍微不同的偏移量(例如 div 偏移量 -600px),如果用户向上滚动页面,超过动画,您可以“重置”动画。虽然,这可能会让用户感到厌烦,并且功大于利……

偏移量:http://api.jquery.com/offset/

滚动条:http://api.jquery.com/scrolltop/

关于javascript - 如何在用户滚动经过某个 div 时更改 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26991797/

31 4 0
文章推荐: javascript - 如何在 PHP 中打印页面以使用与 window.print() 相同的打印机进行打印
文章推荐: Angular 2 [隐藏] 似乎不起作用?
文章推荐: angular - 在 observable 上使用异步管道并将其绑定(bind)到 html 中的局部变量