我有两个紧挨着的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/