滚动可将视频div移动到页面上的其他位置

Question

我对他们在Ted的新网站上的操作方式一无所知。 如果您单击视频上的播放然后向下滚动，则可以在此处看到示例：

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

我正在尝试实现完全相同的目标，我有一个很大的JWplayer元素，当您滚动到播放器上方时，它将视频播放器移动到具有固定标题的新位置。 任何人都知道如何像Ted上那样流畅流畅地完成此操作吗？

我一直在进行类似的工作以使其固定，但这只是使它从内联变为固定，当我真的想将div一起移动到像Ted一样滑出的另一个固定元素上时。

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

非常感谢你的帮助！

Answer 1

我看过他们的代码

* 使用您喜欢的网络检查工具，例如Chrome开发工具

---

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

他们将class talk-hero--pip-on到以下内容

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

使类名如下

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

我假设基于用户的滚动位置，添加了类名-因此，您应该在其CSS中找到一个类似的类名，以应对这种视图更改。