Scrolling moves a video div to another position on the page

Question

i'm at a loss with how they do this on Ted's new website. You can see an example here if you click play on the video and then scroll down:

http://www.ted.com/talks/christopher_soghoian_government_surveillance_this_is_just_the_beginning

I'm trying to achieve the exact same thing, i have a large JWplayer element and when you scroll past the player it moves the video player into a new location with a fixed header. Anyone know of any tricks on how to do this nice and smoothly like on Ted?

I've been working on something like this to make it fixed, but this just makes it go from inline to fixed, when really i want to move the div all together to a different fixed element that slides out like Ted's.

var menuOffset = jQuery('nav')[0].offsetTop;
$(this).bind('scroll',function() {
  var docScroll = jQuery(document).scrollTop();
  if(docScroll >= menuOffset) {
     $('nav').addClass('fixed');
  } else {
  $('nav').removeClass('fixed');
 }
});

Thanks so much for your help!

Answer 1

I've had a look at their code

* Use your favorate web inspector tools ie Chrome Dev Tools

---

CSS

.talk-pip--on{
    -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 16px;
    box-shadow: rgba(0,0,0,0.4) 0 0 16px;
    background: #FFF;
    color: #111;
    display: block;
    font-weight: 700;
    height: 72px;
    width: 100%;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
}

They add the class talk-hero--pip-on onto the following

 <div class="talk-hero talk-hero--playing" id="talk-hero">

making the class name as follows

 <div class="talk-hero talk-hero--playing talk-hero--pip-on" id="talk-hero">

I'm assuming that based on the user's scroll position, that the class name is added - so you should find a similar class name within their CSS to account for that change of view.