如何让Footer Div滚动到底部时推动Affixed Div上移

我正在模仿某搜索结果页的布局，使用Bootstrap affix功能完成了大部分效果，但Footer部分存在问题：在示例页面中滚动至底部时，Footer会推动地图Div上移，而我的页面中Footer会被地图Div（#mapcontainer）遮挡，请问如何让橙色Footer推动#mapcontainer上移？

当前代码 #

CSS #

#topmenu.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
}

#mapcontainer {
    background: lightgray;
    margin-top: -20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#mapcontainer.affix {
    top: 72px;
    z-index: 9999 !important;
}

#topmenu.affix + .container-fluid {
    padding-top: 70px;
}

footer {
    height: 100px;
    background-color: orange;
}

.container-fluid{
    padding-right: 0px;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" id="topmenu" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
    <div class="col-sm-9">
        <div id="mapcontainer" data-spy="affix" data-offset-top="200">
        <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
        </div>
    </div>
  </div>
</div>
<footer class="bg-light text-center text-lg-start" id="footer">
  <div class="text-center p-3">
    hello
  </div>
</footer>
</body>
</html>

问题出在#mapcontainer用了Bootstrap的affix之后，会变成固定定位（position: fixed），固定定位的元素会脱离文档流，完全不受footer的排版影响，所以才会被遮挡。要实现示例里footer推地图上移的效果，换个思路就行：

1. 删掉#mapcontainer上的data-spy="affix"属性，用**粘性定位（position: sticky）**代替Bootstrap affix——粘性定位的元素滚动到指定位置会固定，但还是在文档流里，footer过来时自然会把它往上推。
2. 调整CSS，给#mapcontainer设top:72px，和导航栏高度一致，保证滚动时地图刚好固定在导航下面。
3. 删掉原来#mapcontainer.affix的相关样式，现在用不上了。

修改后的代码 #

CSS #

#topmenu.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
}

#mapcontainer {
    background: lightgray;
    margin-top: -20px;
    width: 100%;
    height: 100vh; /* 用视口高度确保地图占满可用空间 */
    overflow: hidden;
    position: sticky; /* 改用粘性定位 */
    top: 72px; /* 与导航栏高度对齐 */
}

#topmenu.affix + .container-fluid {
    padding-top: 70px;
}

footer {
    height: 100px;
    background-color: orange;
}

.container-fluid {
    padding-right: 0px;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" id="topmenu" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
    <div class="col-sm-9">
        <div id="mapcontainer"> <!-- 移除affix相关属性 -->
        <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
        </div>
    </div>
  </div>
</div>
<footer class="bg-light text-center text-lg-start" id="footer">
  <div class="text-center p-3">
    hello
  </div>
</footer>
</body>
</html>

内容的提问来源于stack exchange，提问作者MrB