最後のコンテンツに達するまでスクロール可能な要素を維持する

Question

この質問をするにはどのようなキーワードを使用するべきかわかりません 私はすでにGoogleでこれを検索していますが、私のキーワードが悪いと思われます。

問題は、私は2つを持っていますdiv動的コンテンツを持つ相対要素です。つまり、この2つの要素の高さは固定されず、スクロール可能です。 のはfirst divがl-contentのclass nameがLeft-Contentのために立って、second divがRight-Contentためclass namer-contentのスタンドを持っているとしましょう。

l-contentにはr-contentより多くのコンテンツが含まれますが、画面サイズがコンテンツ全体を表示するには不十分な場合はスクロール可能です。

私がしたいのは、r-contentが最後のコンテンツに達してからスクロールすると停止し、l-contentだけがスクロールし続けることです。 ads、Recommendationなどが最後のコンテンツが到達したとき、その要素は、それが位置だ固定のように見えること の右側に示されている場所を見ることができるよう

例は、Facebookのようなものです。 固定しているかどうかわかりませんが、私の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を使用しています。

とにかく、ありがとうございました。どんな助けもありがとう。

Answer 1

私はここに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' 
    }); 
    } 
} 

それはあなたの粘着性の要素上記の静的なコンテンツだ場合、これは最適に動作します。リアルタイムで高さを更新している場合は、要素を保持するために多くの計算を行うことになります。