javascript - 滚动将视频 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;
}

他们将 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 中找到一个类似的类名来解释 View 的变化。