如何在達到頁腳時滾動固定區域？

Question

是否可以在CSS中實現以下配置？

• 我有在底部的落款長的頁面（頁腳顯示屬性是柔性）
• 在頁面的可視區域，我需要在固定區域，只要能始終在底部的滾動沒有達到頁腳。
• 一旦滾動已達到頁腳，固定區域應該滾動是在頁腳像下面的截圖的頂部：

1. 的固定區域是在頁面可見區域的底部。

2. 滾動時，如果沒有達到頁腳，固定是將維持在頁面

3. 底部當到達頁腳，固定位置在頁腳的頂部

我想是這樣的：

FixedArea { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 

但是當我滾動，直到頁腳中的固定區域中消失。

Answer 1

我創建了一個例子。嘗試：https://jsfiddle.net/pvviana/wwc8LgLm/

我正在改變頁面底部的div css屬性「位置」。

代碼：

<div class="foo">Hello</div> 
<footer>OKAY</footer> 

的Javascript（jQuery的）：

var $logo = $('.foo'); 
$(document).scroll(function() { 
    $logo.css({position: $(this).scrollTop()>100 ? "relative":"fixed"}); 
}); 

的CSS：

.foo { 
    position: fixed; 
    bottom: 0px; 
} 

Answer 2

可以嵌套在具有元素的固定內容的主體內容一起一個height: 100vh就可以了，overflow: auto就是那個頁面的實際內容，那樣t他的內容將獨立於固定元素進行滾動，並且一旦到達結尾，主體滾動將繼續直到頁面結尾（頁腳）