在滚动功能上更改元素位置时防止页面跳跃

Question

我的网站上有一个视频和一个窗口滚动功能。当某人在视频下方滚动并处于假div元素的级别时，视频将从相对位置更改为固定位置，然后返回滚动到顶部。问题是每当我这样做时页面会跳转（因为元素被移除并放在其他地方）。我试图使用animate和fadeOut函数，但这些似乎没有帮助。

看看这个小提琴我的意思：

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'
                    });
                }
            });

滚动到#video转到固定位置的那一刻（假div）时，页面跳转，滚动不顺畅。在这种情况下，如何实现平滑滚动的效果。我想在这个网站上做点什么：

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

但不知道他们是如何实现这一点的（视频固定在右侧边栏上滚动和滚动仍然很流畅，在Firefox上运行完美）。