我有两个紧挨着的div。两者都太高而无法容纳在窗户中,但是一个比第二个高得多。

在开始的时候,他们已经指定了顶部边缘。当我开始向下滚动时,在较短的div的底部接触到其生存区域的底部之前,什么都不会发生。

此时此较短的div必须冻结,并且当我继续向下滚动时,应始终将其停靠在查看区域的底部。

这时,如果我开始向上滚动,则较短的div sgould会停靠并继续滚动,直到其上边缘接触到观察口的上边界为止。

总结:最长的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接触查看区域的edget之一,然后将其位置调整为FIXED。当滚动方向改变时,我将其重新回到绝对位置

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

我开始怀疑这种结合FIXED / ABSOLUTE的方法是否正确。也许有一个插件可以完成此行为。

任何帮助将不胜感激。

最佳答案

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

查看我提供的JSFiddle。

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

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


我只使用1个滚动事件来检查所有内容,即使有可能,我也没有将所有内容分解为功能。

很难确切解释每个步骤,但这对于您的要求非常有用。

如果您还有其他疑问,请告诉我。

关于javascript - 滚动两个div具有停靠效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27640779/

10-14 15:03
查看更多