5

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.

Esser
  • 540
  • 1
  • 4
  • 16

2 Answers2

5

Stack: Determine the direction of scroll

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;
});

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

Community
  • 1
  • 1
Craighead
  • 519
  • 3
  • 8
  • That's pretty obvious. I actually want a small leaf to slowly move up as the user scrolls down. Thanks anyway. – Esser Jan 20 '14 at 16:24
0

You could use

$(window).scroll(function() { $(image).position($(image).position().top + 10); });

depending on your CSS. If you could provide some code (in a jsFiddle), maybe I would be able to help you a bit better.

Arno
  • 161
  • 10
  • here is the link to the jsfiddle. Can you tell me what's wrong?[jsfiddle](http://jsfiddle.net/MMZ2h/2) – Esser Jan 20 '14 at 16:51