How to animate div on scroll?

Question

Hi I can change and toggle the div attributes on scroll but when I use animate, it won't work but in weird manner.

The following works:

$(document).scroll(function() {
$("#register").css({left: $(this).scrollLeft() > 1348? "-140px":"0px"});
});

But this won't work:

$(document).scroll(function() {
$("#register").animate({left: $(this).scrollLeft() > 1348? "-140px":"0px"});
});

I want the div to go away when I scroll more than 1348, and if the scroll is less than 1348, the div should appear again.

Simple css works but animation doesn't work.

Answer 1

I would recommend using skrollr.js

https://github.com/Prinzhorn/skrollr

typical usage as simple as :

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

where data-number represents current scroll position.

animation can be done using css transit .