CSS，可滾動但不會消失的框

Question

我不確定字詞是否正確。我搜索了不同的條款。簡單的英語我想要一個：

框但滾動但不會消失。

我正在嘗試實現與Linkedin的側邊框類似的框。他們隨頁面滾動，但停止滾動，從不消失。

混合：position:fixed和position:absolute？

我在盒子上還有其他的盒子是問題，與盒子的位置完全相同。

Answer 1

原始CSS不可能，但如果您使用JavaScript，它可能是是。您需要做的就是計算用戶所在頁面的距離，並在每次滾動一定數量的像素時添加內容。

這可以通過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>

希望這有助於！ :)