如何将页脚ID偏移到固定位置的底部

Question

当前，此代码将偏移量应用于'#fixed'ID固定元素

我不知道如何应用相同的效果以将#footer ID设置为固定的底部位置

由于变换创建了新的局部坐标系（W3C Spec），位置：fixed固定到滚动条内容容器的原点，即左侧：0，顶部：0点。

因此，您可能需要注册滚动侦听器并将偏移量应用于固定元素。

有人可以提供任何建议吗？

下面的代码：

var fixedElem = document.getElementById('fixed');

var scrollbar = Scrollbar.init(
  document.getElementById('scroll'),
);

scrollbar.addListener(function(status) {
   var offset = status.offset;
  
  fixed.style.top = offset.y + 'px';
  fixed.style.left = offset.x + 'px';
});

#scroll {
  width: 500px;
  height: 500px;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: skyblue;
  text-align: center;
}

#fixed h1, #footer h1 {
  margin: 0;
}

#content {
  padding-top: 20px;
  background: orange;
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
  <main id="scroll">
    <header id="fixed">
      <h1>A fixed header</h1>
    </header>
    <article id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
      <p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
      <p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
      <p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
      <p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
      <p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
      <p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
      <p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
      <p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
      <p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
    </article>
     <footer id="footer">
       <h1>A fixed footer</h1>
     </footer>
     </main>
   
</body>
</html>