How to stop position fixed at footer

.home{
    min-height:100vh;
}
#sidebar_left {
    width: 20%;
    padding: 20px;
    position: fixed;
    min-height: 82vh;
    background-color: #fdfcfd;
    box-shadow: 0 1px 10px 1px #2680ff6b;
    margin-left: 6%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

#footer {
    background-color: bisque;
    padding: 5px 0;
    text-align: center;
    margin-top: 10px;
    height:50px;
}

<div class="home">
    <div id="sidebar_left">
        Content...
    </div>
</div>
<div id="footer">

</div>

I'm looking for a solution to the popular issue of stopping a fixed object at the footer of the page.

I basically have a fixed "side-bar" box on the left of the screen and I don't want it to scroll over the footer, so I need it to stop about 10px above the footer. I actually need my sidebar to be fixed while scrolling till the footer comes.

The footer is #footer and it doesn't have a fixed height if that makes any difference.

If someone could assist me in creating a simple solution for this, I'd much appreciate it!

Solution

Enter: position: sticky.

A "sticky" element behaves the same as a fixed element, except it will not leave its parent container. You need to set one of top, left, right or bottom for it to work.

(You might need to view the snippet in full screen to see the effect.)

.home {
  min-height: 100vh;
}

#sidebar_left {
  width: 20%;
  padding: 20px;
  position: sticky;
  top: 6vh;
  left: 6%;
  min-height: 82vh;
  background-color: #fdfcfd;
  box-shadow: 0 1px 10px 1px #2680ff6b;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  scrollbar-width: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

#footer {
  background-color: bisque;
  padding: 5px 0;
  text-align: center;
  margin-top: 10px;
  height: 100px;
}

<div class="home">
  <div id="sidebar_left">
    Content...
  </div>
</div>
<div id="footer">
  Footer content
</div>