CSSがスクロールするが消えないボックス

Question

文言が正しいかどうかわかりません。私は別の言葉をGoogleで探検した。私は平易な英語で、スクロールしても消えないボックスを希望します：

私はLinkedinのサイドボックスと同様のボックスを実現しようとしています。それらはページと共にスクロールしますが、スクロールを止めて消えません。

以下の組み合わせ：position:fixedとposition:absolute？

私はボックスの上に他のボックスがありますが、それはサイドボックスと全く同じエリアに配置されています。

Answer 1

JavaScriptを使用している場合は、はですが、生のCSSでは使用できません。ユーザーがどれだけページを下ろしているかを調べ、特定の数のピクセルをスクロールするたびにコンテンツを追加するだけです。

これはjQueryで非常に簡単に実現できます。 $(window).scroll()関数にバインドし、高さを$(window).scrollTop()で確認できます。その後、単に新しいコンテンツを.append()に追加します。

次の例では、$(window).scrollTop() + $(window).height() > $(document).height() - 100は、ユーザーがコンテンツの最後まで100ピクセル離れたときにチェックします。新しいコンテンツが追加され、スクロールバーの長さが長くなります。それは、文書の高さに対してチェックしているので

、新しいコンテンツの終わりに到達するたびに、ループが再びトリガされます、そして、さらに多くのコンテンツが作成されます。このことができます

/* Initial content */ 
 
for (var i = 0; i < 100; i++) { 
 
    $("#scroll").append($("<div class='original-content'>Original content</div>")); 
 
} 
 

 
/* Bonus content */ 
 
$(window).scroll(function(event) { 
 
    var scroll = $(window).scrollTop(); 
 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
 
    for (var i = 0; i < 100; i++) { 
 
     $("#scroll").append($("<div class='new-content'>New content</div>")); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="scroll"></div>

希望：したがって、以下は本当の無限スクロールを提供しています！ :)