保持元素可滾動，直到到達最後一個內容

我不確定我應該用什麼樣的關鍵字來提問這個問題，我已經在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

保持元素可滾動，直到到達最後一個內容

回答

相關問題