Evite que la página salte mientras cambia la posición del elemento en la función de desplazamiento

Tengo un video en mi sitio y una función de desplazamiento de ventana. Cuando alguien se desplaza por debajo del video y está al nivel de un elemento div falso, el video cambia de posición relativa a fija y luego vuelve a desplazarse hacia arriba. El problema es que la página salta cada vez que lo hago (porque el elemento se elimina y se coloca en otro lugar). Traté de usar funciones animadas y fadeOut pero estas no parecían ayudar.

Mira este violín por lo que quiero decir:

https://jsfiddle.net/xwgza7qf/2/

var h = $('#fake-element').position().top; console.log(h); $(window).scroll(function(){ var y = $(window).scrollTop(); if( y > h){ $('#video').css({ 'position' : 'fixed', 'display' : 'block', 'left' : '50px', 'width' : '50px', 'top' : '45px' }); } else { $('#video').css({ 'position' : 'relative', 'display' : 'block', 'left' : '0px', 'width' : 'auto', 'top' : '0px' }); } }); 

Cuando se desplaza al momento (div falso) donde #video va a fijar la posición, la página salta, el desplazamiento no es uniforme. ¿Cómo puedo lograr el efecto de desplazamiento suave en este caso? Quiero hacer algo como en este sitio:

http://www.cnn.com/2016/02/01/politics/iowa-caucuses-2016-highlights/index.html

pero no tengo idea de cómo lo lograron (el video va a la barra lateral derecha para desplazarse y el desplazamiento sigue siendo fluido, funciona perfectamente en Firefox).