Correct way to move div downwards when scrolling with Skrollr?

I am using this awesome Skrollr libary: https://github.com/Prinzhorn/skrollr (animations on scrolling)

So far I have this as my implementation:

<div class="band2 landing">
    <div class="container">
        <div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
            <img src="/static/images/snappie.png" width="280px">
            <img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
        </div>
    </div><!-- end container -->
</div><!-- end band landing -->

basically I am moving the entire "inside" div downwards when the user scrolls down. I increase the top margin by a certain amount when the user has scrolled a certain number of pixels.

While this technically works, it produces some really weird scrolling, as you can see here on the test site: http://snappiesticker.pythonanywhere.com/splash

see how the scrollbar quivers and shakes and how its hard to scroll past the yellow bar?

I feel like hard coding these pixel values is generally not the best way to go about this and will fall apart especially when using a variety of screen sizes, browsers, etc.

What is the correct way to do this? Any skrollr experts?

Solution

Instead of using margin-top, margin-right etc.

Try using the transform:translate3d(0, 0, 0).

The first two 0's are the x and y coordinates and should be adjusted to match the effect of the margins you were setting. The third 0 is the z coordinate, which should stay at 0.

This way you are killing two birds with one stone. The transform:translate property is a lot easier for the browser to handle and the 3d enables hardware acceleration. Hopefully this will smooth things out for you.