Question

我有两个瘦小的divs彼此相邻。两者都太高，不适合窗户，但一个比第二个高得多。

在beginngin中，他们分配了上边缘。当我开始向下滚动时，不会发生任何显着的事情，直到较短的div的底部触及它们的viwing区域的底部。

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

此时，如果我开始向上滚动，则较短的div会退出并继续滚动，直到其上边缘接触到观察端口的上边界。

总结：最长的div应该可以自然滚动，但是较短的div应该永远不会从视图中消失，这可以通过将它对接到窗口的下边缘或上边缘来实现。

以下是我提出的半工作解决方案：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。当croll方向改变时，我把它带回ABSOLUTE

我成功检测到了OnScrollUp / Down事件并进行了正确的检查，但当我将元素的位置从FIXED更改为ABSOLUTE时，我得到一个跳跃的行为。

我开始想知道这种处理FIXED / ABSOLUTE的方法是否正确。也许有一个插件可以完成这个行为。

任何帮助都将受到高度赞赏。

Answer 1

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

查看我提供的JSFiddle。

我更改了一个css元素，因为数学有点偏差导致一个非常奇怪的实例。这应该是您在CSS中以任何方式执行的默认操作。我没有在你提供的JS中看到它。

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

我只使用1个滚动事件检查所有内容，即使可以这样做，我也不会将所有内容分解为函数。

很难准确地解释每一步，但这非常适合你所要求的。

如果您对此事有更多疑问，请与我联系。

Answer 2

仅当滚动到顶部距离小于较小div的高度时，向上滚动时从固定跳转到绝对。否则让它保持固定。

您可以通过$(window).scrollTop()从窗口顶部获取滚动距离。

滚动两个具有对接效果的div

2 个答案: