Javascript 确定项目的位置和触发滚动

当前代码：

正如你所看到的，我有一个固定的div，上面有背景图像、封面和不透明度属性，下面有一个内容div。我想要的是；当用户向下滚动时，top div首先滚动。当top div从视口中滑出时，content div开始滚动

下面是一个快速的动画，让我们清楚地看到：

---

这适合你的要求吗

$(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')}
        });

---

更新：

这是一个很复杂的问题，单用JS/jQuery就可以解决

我建议看一下position:sticky的CSS实现，然而，浏览器并不广泛支持它。但根据我的经验，这是解决这个问题的最好方法。而且它可以在iOS上运行，这是一个很大的优势

以下是有关浏览器支持的信息：

这里有一个适用于其他浏览器的多边形填充：带有演示

---

更新：这里有一个在Firefox和Safari中工作的概念验证：

谢谢Marius，它看起来很有希望。好的，很乐意帮助。再次阅读您的问题，我意识到我的示例可能并不完全符合您的要求，但经过一些调整，它应该：谢谢，但这不是我想要的。我到底错过了什么？对不起，我应该提供更多信息。Top div未水平滚动。感觉像一些白色的div从顶部的div滑入。而且它是不可逆转的。我的意思是，当我滚动页面顶部时，top div不是滑入的。让我了解一下：当用户加载页面时，应该首先看到什么？白色背景上的文本还是带有文本的背景图像？在作为示例发布的动画中，背景图像隐藏在顶部，当用户在内容到达末尾后向下滚动时，背景图像将滑入。在你的小提琴中，我看到了图像背景和文本预览；当用户在我的页面中加载时，他们应该首先看到带有背景图像的top div。当用户开始滚动时，top div首先开始滑出。但文本div仍然静止不动。当top div完全从视口中滑出时，text div开始自然滚动。

$(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')}
        });