Pinned element jumps

[sarahgracesmith]

Similar to #595 but it isn't a constant jump. It mostly behaves as desired but there's a little jump as you scroll down. See the example: https://jsfiddle.net/nzg9nmab/2/

[pauljohnknight]

Hi Sarah, Have you tried using ScrollMagic with Greensock? You could set the heading so it's Y co-ordinate is 0 and then pin it by matching the both length of the tween with the duration in Scrollmagic ? For instance:

` var box = getElementById("box"); // a standard box div

// GREENSOCK

TweenMax.set(box, {y: 0}); // prepares box for fixed scrolling effect wherever it is on the page

var moveBox = TweenMax.to (box, 1, {y:320, ease:Linear.easeNone}); // where the Y coordinate will match the duration in the ScrollMagic scene below to create the effect of it being fixed.

// SCROLLMAGIC

var controller = new ScrollMagic.Controller();

var homeBoxMove = new ScrollMagic.Scene ({ triggerElement: box, duration: 320, // matches length of Y axis tween. triggerHook: 0.6 }) .setTween(moveBox) .addIndicators() .addTo(controller); });

`

[sarahgracesmith]

The issue seemed related to position: absolute. When I switched to position: relative it quit jumping. (I didn't try to apply your suggestion to the position: absolute case)