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

Question

是否可以在CSS中实现以下配置？

• 我有一个长页面底部有一个页脚（页脚显示属性是flex）
• 在页面的可见区域，只要滚动没有到达页脚，我就需要固定区域始终在底部。
• 滚动到达页脚后，固定区域应向上滚动到页脚顶部，如下面的屏幕截图所示：

1. 固定区域位于页面可见区域的底部。

2. 滚动时，如果未到达页脚，则固定页面将保留在页面底部

3. 到达页脚时，固定位置位于页脚顶部

我尝试过类似的事情：

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

但是当我滚动到页脚时，固定区域会消失。

Answer 1

您可以将正文内容与固定内容一起嵌套在其中包含height: 100vh的元素中，并在该页面的实际内容上嵌套overflow: auto，这样内容将独立滚动修复元素，一旦到达结尾，身体滚动将继续，直到页面结束（页脚）

Answer 2

我创建了一个例子。尝试：https://jsfiddle.net/pvviana/wwc8LgLm/

我正在更改页面底部的div css属性“position”。

代码：

<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 3

这是（另一个）可能的jQuery解决方案。

在滚动过程中，计算到窗口底部为止的剩余距离，然后开始在固定区域上设置bottom样式属性的页脚高度减去剩余距离，否则请确保已设置（返回）如下所示（请注意，我将内容块的高度设置为800px，因此请确保尝试此操作，以使结果窗口的高度小于该高度）：

var originalBottom = 0; // get this depending on your circumstances
var footerHeight = 72; // get this depending on your circumstances
$(window).scroll(function () { // start to scroll
  // calculating the distance from bottom
  var distanceToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
  if (distanceToBottom <= footerHeight) // when reaching the footer
    $("#fixed-area").css('bottom', (footerHeight - distanceToBottom) + 'px');
  else // when distancing from the footer
    $("#fixed-area").css('bottom', originalBottom + 'px'); // only need to specify 'px' (or other unit) if the number is not 0
});

body {
  padding: 0;
  margin: 0;
}

#content {
  height: 800px;
}

#fixed-area {
  position: fixed;
  bottom: 0;
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  width: calc(100% - 22px); /* padding (2*5) + border (2*1) + margin (2*5) */
  text-align: center;
}

#footer {
  height: 40px;
  position: relative;
  bottom: 0;
  padding-top: 20px;
  margin: 5px;
  border: 1px solid black;
  text-align: center;
}

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

<div id="fixed-area">Fixed Area</div>
<div id="content"></div>
<div id="footer">Footer</div>