保持元素可滚动，直到到达最后一个内容

Keep element scrollable until last content is reached

本文关键字：最后一个 元素 滚动      更新时间：2023-09-26

我不确定我应该使用什么样的关键字来问这个问题，我已经在谷歌中搜索过这个，但看起来我的关键字很糟糕。

问题是，我有两个div具有动态内容的相对元素，这意味着这两个元素的高度不是固定的，它们是可滚动的。假设first div有class name l-content代表Left-Content，second div有class name r-content代表Right-Content。

l-content将比r-content有更多的内容，但是当屏幕尺寸不足以显示整个内容时，它们都可以滚动。

现在我想发生的是，当r-content到达它的最后一个内容时，滚动它将停止，以便只有l-content继续滚动。

该示例就像在Facebook上一样，您可以看到ads，Recommendation等显示在其右侧的位置当到达最后一个内容时，该元素看起来像是固定它的位置。我不确定它是否正在修复，但我希望我的r-content是这样的，但不知道如何。

目前这就是我所拥有的一切，请注意，我正在为此使用 Bootstrap：

.CSS 

h1 {
    font-family: sans-serif;
    color: #FFF;
    letter-spacing: 2px;
    font-weight: 300;
}
.l-content, .r-content {
    display: table;
    float: left;
    margin-bottom: 8px;
    text-align: center;
    padding: 20px;
}
.l-content {
    width: 800px;
    height: 2000px;
    background: #E04C4E;
    margin-right: 8px;
}
.r-content {
    width: 430px;
    height: 1000px;
    background: #5996BC;
}

.HTML

<!--LEFT CONTENT-->
<div class="col-lg-8 l-content">
  <h1>Left Content with Continue Scrolling.</h1>
</div>
<!--RIGHT CONTENT-->
<div class="col-lg-4 r-content">
  <h1>Right Content with Continue Scrolling but scrolling will stop when last content is reached.</h1>
</div>

我不确定他们是否正在使用Javascript来做到这一点。

无论如何，非常感谢。任何帮助将不胜感激。

我相信

你在这里需要javascript，而jQuery正是为此而设计的。

scroll（） 和 scrollTop（） 是这里的神奇函数：

var h = $(preceding-content).height()
var s = $('#your-sticky-element')
$(window).scroll(function(){ 
  if($(window).scrollTop() <= h){
    $(s).css({
     'position':'fixed',
     'top':'0px'
    });
  }else{
    $(s).css({
     'position':'initial'
    });
  }
}

如果它是粘性元素上方的静态内容，这将效果最佳。 如果它实时更新其高度，您将进行大量计算以保持元素就位。

相关文章：