Question

我对他们在Ted新网站上的表现感到茫然。如果您点击视频播放然后向下滚动，则可以在此处查看示例：

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

我正在尝试完全相同的东西，我有一个大的JWplayer元素，当你滚过播放器时，它将视频播放器移动到一个带有固定标题的新位置。任何人都知道如何在Ted上做到如此美妙和顺利的任何技巧？

我一直在做这样的事情来修复它，但这只是让它从内联到固定，当我真的想把div一起移动到一个不同的固定元素，像Ted一样滑出。 / p>

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中找到一个类似的类名来解释这个视图的变化。

滚动将视频div移动到页面上的另一个位置

1 个答案: