确定项目的位置并触发滚动

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从视口滑出时，内容div开始滚动。

这是一个快速动画来说清楚：

Answer 1

这对您的要求有用吗？

$(window).on("mousewheel", function(e) {
            e.preventDefault();
            $('.fixed').animate({
                marginTop:'+=30px'
            }, 0);
            if($('.fixed').offset().top >= $(window).height(){$(this).unbind('mousewheel'); 
$('.content').css('position','absolute')}
        });

http://jsfiddle.net/hxqyz39p/

更新： http://jsfiddle.net/hxqyz39p/1/

Answer 2

这是一个非常复杂的问题，仅在JS / jQuery中解决。

我建议看一下position: sticky的CSS实现，但是，它并不是浏览器广泛支持的东西。 （但根据我的经验，这是解决这个问题的最好方法。它适用于iOS，这是一个很大的优势。）

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

这是其他浏览器的填充：https://github.com/filamentgroup/fixed-sticky（带演示）

更新：以下是概念验证（适用于Firefox和Safari）：http://jsfiddle.net/2s1w6cbL/2/