如何在页眉和页脚之间滚动时创建固定边栏？

body {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background-color: #f1f1f1;
}

footer {
  height: 50px;
  background-color: #f1f1f1;
}

.sidebar {
  position: fixed;
  top: 100px; /* 页眉的高度 */
  bottom: 50px; /* 页脚的高度 */
  width: 200px;
  background-color: #f1f1f1;
}

window.addEventListener('scroll', function() {
  var sidebar = document.querySelector('.sidebar');
  var headerHeight = document.querySelector('header').offsetHeight;
  var footerHeight = document.querySelector('footer').offsetHeight;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  sidebar.style.top = headerHeight + 'px';
  sidebar.style.bottom = footerHeight + 'px';
});