如何在达到页脚时滚动固定区域？

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他的内容将独立于固定元素进行滚动，并且一旦到达结尾，主体滚动将继续直到页面结尾（页脚）