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

我不确定我应该用什么样的关键字来提问这个问题，我已经在Google中搜索这个，但看起来像我的关键字不好。保持元素可滚动，直到到达最后一个内容

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

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

现在我想要发生的是当r-content已达到它的最后内容，然后滚动它将停止，因此只有l-content将继续滚动。

的例子是像Facebook，你可以看到ads，Recommendation等显示在它右侧当达到最后的内容那么元素看起来像固定它的位置。我不知道它是否正在修复，但我想我的r-content是这样但不知道如何。

目前这是我的所有，请注意，我用的引导在此：

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来做到这一点。

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

来源

2016-04-28 bernzkie

你能提供一个jsfiddle或bootply吗？ – d4rty

@ d4rty - 这是我的'jsfiddle' - https://jsfiddle.net/e1bcLxsq/2/ – bernzkie

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

滚动（）和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' 
    }); 
    } 
}

这将工作最好的，如果这是你的粘元以上的静态内容。如果它实时更新它的高度，你将会做很多计算，只是为了保留一个元素。

来源

2016-04-28 16:01:51 elendee

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

回答

相关问题