滾動可將視頻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中找到一個類似的類名，以應對這種視圖更改。