Javascript 如何使固定元素保持在父元素'；CSS的可见边框？

这是我的布局，黄色部分是固定的。我制作了一个简单的脚本，使边栏收缩/增长，这样它就不会越过绿色的页脚，是否可以仅用CSS实现同样的效果

请在此处查看它的实际操作：

我制作了一个简单的jquery脚本，这样当滚动窗口时绿色部分上升时，固定的黄色边栏就会收缩

HTML、CSS、JS：

<div id="content">
  <div id="sidebar">
    <div id="sidebar-container">
      <div id="sidebar-wrapper">
        <div id="sidebar-content">
          height: 300px
        </div>
      </div>
    </div>
  </div>
  <div id="article">
    Scroll me to see the sidebar shrink
  </div>
</div>
<div id="footer">

</div>

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
}
#content {
  display: flex;
  justify-content: stretch;
}

#sidebar {
  height: inherit;
  width: 100px;
  flex: 0 0 auto;
  background-color: red;
}

#article {
  background-color: orange;
  flex-grow: 1;
  font-size: 55px;
}

#sidebar-container {
  position: fixed;
  max-height: 100%;
  height: inherit;
  width: inherit;
  background-color: red;
  display: flex;
  flex-direction: column;
}

#sidebar-wrapper {
  background-color: yellow;
  overflow-y: scroll;
}

#sidebar-content {
  background-color: rgba(255, 0, 0, 0.1);
  height: 20000px;
}

#mainbar {
  background-color: blue;
}

#content {
  height: 300px;
  width: 500px;
  background-color: rgba(255, 255, 255, 0.75);
}
#footer {
  height: 2000px;
  width: 500px;
  background-color: green;
}

$(document).ready(function() {
    var sidebar_container = $('#sidebar-container');
  var sidebar_content = $('#sidebar-content');
  var footer = $('#footer');
  $(window).scroll(function () {
    sidebar_container_height = 
        Math.max(
        Math.min(
            footer.offset().top - $(window).scrollTop(),
          $(window).height()),
      0);
    sidebar_container.css('height', sidebar_container_height + 'px');
    sidebar_content.text('height: ' + sidebar_container_height + 'px');
  })
})

高度：300px
滚动我看到侧边栏收缩
身体{
填充：0；
保证金：0；
最小高度：100%；
}
#内容{
显示器：flex；
证明内容：拉伸；
}
#边栏{
身高：继承；
宽度：100px；
flex:0自动；
背景色：红色；
}
#文章{
背景颜色：橙色；
柔性生长：1；
字体大小：55px；
}
#边栏容器{
位置：固定；
最大高度：100%；
身高：继承；
宽度：继承；
背景色：红色；
显示器：flex；
弯曲方向：立柱；
}
#边栏包装{
背景颜色：黄色；
溢出y：滚动；
}
#边栏内容{
背景色：rgba（255,0,0,0.1）；
高度：20000像素；
}
#主条{
背景颜色：蓝色；
}
#内容{
高度：300px；
宽度：500px；
背景色：rgba（255、255、255、0.75）；
}
#页脚{
高度：2000px；
宽度：500px；
背景颜色：绿色；
}
$（文档）.ready（函数（）{
var sidebar_container=$（“#sidebar container”）；
var侧栏内容=$（“#侧栏内容”）；
var footer=$（“#footer”）；
$（窗口）。滚动（函数（）{
侧栏\容器\高度=
马克斯(
Math.min(
footer.offset（）.top-$（窗口）.scrollTop（），
$（window.height（）），
0);
css（'height'，sidebar_container_height+'px'）；
边栏内容文本（'height:'+边栏容器高度+'px'）；
})
})

我认为在某些情况下，可以使用

位置：绝对；z-index:999

在

#页脚上

。但这会导致页脚覆盖侧边栏，而不是调整侧边栏的大小。

我认为在某些情况下，可以使用

位置：绝对；z-index:999

在

#页脚上

。但这会导致页脚覆盖侧边栏，而不是调整侧边栏的大小