javascript - 确定元素的位置并触发滚动

Question

当前代码: http://jsfiddle.net/gridnik/2s1w6cbL/

<div class="fixed">
</div>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

如您所见，我在所有内容之上有一个固定的 div(具有背景图像、“封面”和“不透明度”属性)，在其下方有一个内容 div。我想要的是；当用户向下滚动时，顶部 div 首先滚动。当顶部 div 从视口(viewport)滑出时，内容 div 开始滚动。

这里有一个简短的动画来说明:

Answer 1

这是一个单独用 JS/jQuery 解决的相当复杂的问题。

我建议看一下 position: sticky 的 CSS 实现，但是，它并没有得到浏览器的广泛支持。 (但根据我的经验，这是解决此问题的最佳技术。而且它适用于 iOS，这是一个很大的优势。)

有关浏览器支持的信息如下:http://caniuse.com/#feat=css-sticky

这是其他浏览器的 polyfill:https://github.com/filamentgroup/fixed-sticky (带演示)

更新:这是一个概念证明(适用于 Firefox 和 Safari):http://jsfiddle.net/2s1w6cbL/2/