Search code examples
htmlcsspositionsticky

Ensure sidebar sticky goes to the bottom of the viewport when scrolled down

https://jsfiddle.net/fw8ozvqh/

When the page is not scrolled, the sidebar meets the bottom of the page properly and content in the sidebar can still be scrolled all the way to the bottom.

enter image description here

However, once the page scrolls, the sidebar is off the bottom of the page by the size of the navbar + margin. This is expected, however, is there a way to ensure the sidebar sticks to the bottom of the viewport as well after scrolling the body?

enter image description here

Solutions that involve absolute or fixed positioning are not sufficient for me, as I'd like to keep the sidebar in the flow of the document.

html, body {
  height: 1200px;
  background: red;
  margin: 0;
}

header {
  height: 50px;
  background: blue;
}

.sidebar {
  background: green;
  height: calc(100vh - 50px - 32px);
  position: sticky;
  top: 32px;
  margin-top: 32px;
  width: 200px;
  overflow-y: scroll;
}

<header>
   header
</header>

<div class="sidebar">
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
  <div>sidebar content</div>
</div>
Solution

  • I solved it using interaction observer to detect when sticky is triggered and then removed the header height from the calc. Not a perfect solution, but gets the job done in my use case. A better solution would be nice.