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)