javascript - 滚动两个具有停靠效果的 div

Question

我有两个相邻的瘦 div。两者都太高而无法装进 window ，但其中一个比第二个高得多。

在开始时，它们的顶部边缘对齐。当我开始向下滚动时，在较短的 div 的底部触及它们查看区域的底部之前，不会发生任何值得注意的事情。

此刻，这个较短的 div 必须卡住，并且当我继续向下滚动时，它应该始终停靠在查看区域的底部。

此刻，如果我开始向上滚动较短的 div，sgould 将取消停靠并继续滚动，直到其上边缘接触到查看端口的上边界。

总结:最长的 div 应该自然滚动，但较短的 div 永远不应该从 View 中消失，这是通过将其停靠在窗口的下边缘或上边缘来实现的。

这是我想出的半可行解决方案:http://jsfiddle.net/Laod7wLr/

    <div class="parent">
    <div id="col1"> 
        Header
        <div class="content"> </div>
        Footer
    </div>
    <div id="col2">
        Header
        <div class="content"> </div>
        Footer
    </div>
</div>

和 CSS:

.parent{
    position:relative;
}

#col1, #col2{
    width:350px;
    color:white;
    display:inline-block;
    position:absolute;
}
#col1{
    background:grey;

}
#col2{
    background:darkgrey;
    right:0;
}

#col1 .content{
    height:2000px;
}

#col2 .content{
    height:1600px;
}

我的想法是检测最短的 div 触及查看区域的最边缘之一，然后将其位置调整为 FIXED。当滚动方向改变时，我将其恢复为绝对

我成功地检测到 OnScrollUp/Down 事件并进行了适当的检查，但是当我将元素的位置从 FIXED 更改为 ABSOLUTE 时，我得到了一个神经质的行为。

我开始怀疑这种兼顾 FIXED/ABSOLUTE 的方法是否正确。也许有一个插件可以实现这种行为。

任何帮助将不胜感激。

Answer 1

http://jsfiddle.net/Laod7wLr/14/

查看我提供的 JSFiddle。

我更改了一个 css 元素，因为数学有点不对劲，导致了一个非常奇怪的实例。这应该是您在 css 中所做的任何方式的默认设置。我在你提供的JS中没有看到。

html,body{
    margin: 0;
    padding: 0;
}

我只使用 1 个滚动事件来检查所有内容，并且我没有将所有内容分解为函数，即使这样做是可能的。

很难准确解释每个步骤，但这非常适合您的要求。

如果您对此事有更多疑问，请告诉我。