右侧Sticky侧边栏无法随页面上滑同步滚动的解决方案

这是此前问题的延伸，当前实现中，右侧侧边栏滚动完全部内容后会变为sticky状态，用户可自由滚动主内容区（类似Twitter的布局效果），但存在问题：用户上滑页面时，右侧侧边栏需滚动到页面顶部才会跟随上滑，该如何解决？

可行解决方案 #

JavaScript 代码 #

var lastScrollTop = 0;

document.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  document.querySelector('.right-sidebar').classList.toggle('scroll_down', st > lastScrollTop);
  lastScrollTop = st <= 0 ? 0 : st;
}, false);

CSS 代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3fr;
  min-height: 100vh;
  font-size: 2rem;
}

.inner-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left-sidebar,
.right-sidebar,
.main {
  margin: 0 1rem;
}

.left-sidebar,
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  height: 95%;
  margin-top: 2.5rem;
}

.left-sidebar {
  background-color: burlywood;
  height: 100vh;
  position: sticky;
  top: 0;
}

.main {
  background-color: tomato;
  height: 3000px;
}

.right-sidebar {
  background-color: cadetblue;
  position: sticky;
  min-height: 100vh;
  height: 1000px;
  top: 0;
}

.scroll_down {
  top: unset;
  bottom: 0;
  margin-top: auto;
}

.fixed-header {
  background-color: black;
  color: white;
  position: fixed;
  width: auto;
  top: 0;
}

HTML 代码 #

<div class="container">
  <div class="left-sidebar">
    <div>
      <div>left sidebar</div>
      <div>top</div>
    </div>
    <div>bottom</div>
  </div>
  <div class="inner-grid-container">
    <div class="main">
      <div class="fixed-header">fixed header</div>
      <div class="content">
        <div>
          <div>main</div>
          <div>top</div>
        </div>
        <div>bottom</div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="fixed-header">fixed header</div>
      <div class="" style="margin-top: 2.5rem;">
        <div>
          <div>right sidebar</div>
          <div>top</div>
        </div>
        <p style="font-size: 1rem;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iste, repudiandae quasi, cumque mollitia animi, libero dolores aliquam ipsam optio veritatis tempore eius. Nemo magni molestiae quis similique itaque dolorem quisquam, neque odit debitis
          earum deleniti ut natus distinctio ipsa repellendus tempore voluptatem cupiditate sunt delectus quo? Pariatur, quis modi natus molestiae quibusdam quod, dolore perferendis deserunt deleniti fugit, fuga voluptas a numquam accusamus quam aliquam?
          Ipsa necessitatibus perspiciatis sunt eaque, incidunt vitae, labore autem, quos voluptatibus numquam commodi earum non iusto. Sapiente quis, praesentium maxime odit, eligendi libero illo necessitatibus deserunt nisi, assumenda culpa ducimus
          cum debitis dolores sequi?</p>
        <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="150" height="300" alt="">
        <div style="position: absolute; bottom: 0;">bottom</div>
      </div>
    </div>
  </div>
</div>

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