用户滚动时移动图像或元素 [英] Move an image or element when user scrolls

问题描述

我正在尝试找出如何在滚动事件上移动图像.我使用了.animate，但是即使用户放开了它，它也会一直移动.我希望它在用户停止滚动时停止.

I'm trying to figure out how to move an image on the scroll event. I used .animate, but that moves it all the way, even after the user lets go. I want it to stop when the user stops scrolling.

推荐答案

Stack: Determine the direction of scroll

使用此功能，然后可以使用.animate

By using this, you can then use .animate

JSFiddle

var lastScrollTop = 0;
$("div").scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
    $('img').animate({top: '-=10'}, 10);
} else {
    $('img').animate({top: '+=10'}, 10);
}
lastScrollTop = st;
});

忽略::如果您希望图像随页面一起移动，请将position: fixed;添加到CSS.

Disregard: If you would like the image to move with the page, add position: fixed; to the CSS.

这篇关于用户滚动时移动图像或元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！