Two sticky elements in the same relative container but on opposite ends

Question

I'm trying to code a little layout with sticky elements. Please run the example below for maximum clarity. I'm trying make a sidebar with two elements in it :

1. A menu (the pink part) which should stick to the sidebar, given a certain distance from top. This works perfectly in my example.
2. A button (the yellow part) which should stick to the sidebar too, but with a certain distance from the bottom. This doesn't work. Why ?

The behaviour I'm expecting is something along those lines :

• The footer should make both the menu and the button disappear to the top when "pushing" from the bottom.
• The button should be the first element to be pushed by the footer when scrolling down, pushing the menu up.
• When the footer is not in the way, the menu should always be 70px from the top, and the button 70px from the bottom.

How can I do that ? Thanks.

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50px;
  background: blue;
}

.main {
  display: flex;
}

.sidebar {
  position: relative;
  width: 100px;
  background: red;
}

.menu {
  position: sticky;
  top: 70px;
  height: 60px;
  background: pink;
}

.button {
  position: sticky;
  bottom: 70px;
  height: 20px;
  background: yellow;
}

.content {
  flex-grow: 1;
  height: 800px;
  background: lightgrey;
}

.footer {
  height: 800px;
  background: grey;
}

<div class='header'></div>
<div class='main'>
  <div class='sidebar'>
    <div class='menu'></div>
    <div class='button'></div>
  </div>
  <div class='content'></div>
</div>
<div class='footer'></div>