How to make only a section of a html page scroll and stop content going behind sticky elements?

Question

I am trying to achieve the following but I am stuck at the moment;

1. Make my 'Main content' section scroll with browser main scroll.
2. Keep the sidebar fixed while the main content section scrolls.
3. Stop sidebar content going behind the navbar. Currently sidebar content goes behind the sticky navbar when scrolling.
4. Make the sidebar grow until the bottom of the page (I set the height property to 100%).

A snippet of my code is below.

function openNav() {
  document.getElementById("sidenav").style.width = "200px";
  document.getElementById("wrapper").style.marginLeft = "220px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
  document.getElementById("wrapper").style.marginLeft= "20px";
}

body {
  margin: 0;
}

.header {
    padding: 20px;
    text-align: center;
    background: black;
    color: white;
}

#wrapper {
    overflow-y: scroll;
    margin-left: 220px;
    margin-bottom: 50px;
    transition: margin-left 0.5s;
}

#content {
    position: relative;
}


/* Style the top navigation bar */
.navbar {
    overflow: hidden;
    background-color: grey;
    z-index: 5;
}

.navbarWrapper {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Style the navigation bar links */
.navbar a {
    float: left;
    font-size: 16px;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}


/* Style the Side bar */
.sidenav {
    height: 100%;
    width: 200px;
    position: absolute;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
}

.sidenav a {
    padding: 6px 6px 6px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidePanaelclosebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    cursor: pointer;
}

/* Change color on hover */
.navbar a:hover {
  background: #ddd;
  color: black;
}

.sidenav a:hover {
    color: white;
}

<div class="header">
    <h1>TEST</h1>
    <p>TEST</p>
</div>

<div class="navbarWrapper">
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Contact</a>
    </div>
</div>

<div id="sidenav" class="sidenav">
    <a onclick="closeNav()" class="sidePanaelclosebtn">&times;</a>
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
</div>

<div id="wrapper">
    <div id="content">
        <span class="threeDashLines" onclick="openNav()">&#9776;</span>
        <h3>Main content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut aliquam imperdiet, quam nisl ultricies leo, eu laoreet arcu erat nec ante. Praesent ullamcorper faucibus dapibus.</p>
        <p>Vivamus metus lacus, iaculis eget varius quis, ultrices in mi. Curabitur ut nisl libero. Nunc lobortis pellentesque mauris rhoncus rutrum. Proin nec auctor augue. Aliquam erat volutpat. Curabitur libero sapien, blandit vel ultrices sed, accumsan fringilla erat. Pellentesque consequat neque eu eros elementum ac consectetur sapien gravida. Phasellus sit amet purus vel turpis feugiat porttitor.</p>
        <p>Sed mollis, ligula in vulputate dapibus, urna arcu dictum leo, ac semper nisi risus elementum elit. Aliquam euismod lacus massa. Morbi fermentum mattis faucibus. Aenean ultrices, enim non pulvinar dictum, nibh orci tempor quam, a pretium augue quam sed lectus. Nullam auctor, nunc a dignissim pretium, lacus mauris dictum elit, et faucibus risus augue id risus. Curabitur mollis vestibulum augue, sed vulputate orci consectetur quis. Cras vel mollis urna. Ut eu fermentum elit.</p>
        <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
        <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
        <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
        <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
        <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
    </div>
</div>

Appreciate it a lot if anyone has any suggestions on this.

Answer 1

Your original solution is a bit shaky and so is the answer to fix it. You can do most of these things with just pure css if you structure it a bit different.

In my example I added a container to your sidenav and main area main-container. Doing that your sidenav does not need to be absolute, and you can use position sticky to it. Right now the sidenav has a fixed top that I set to the height of the main nav but that can easy be changed to a javascript solution if you need the value to be dynamic.

Also don't style elements with javascript, add and remove classes for styles, if you ever get and answer that accepts to show bad practises like that just don't use it. Check the classList

Hope this bring clarity?

function openNav() {
  document.querySelector('#sidenav').classList.remove('sidenav--is-closed')
}

function closeNav() {
  document.querySelector('#sidenav').classList.add('sidenav--is-closed')
}

body {
  margin: 0;
}

.header {
  padding: 20px;
  text-align: center;
  background: black;
  color: white;
}

#wrapper {
  overflow-y: scroll;
  margin-bottom: 50px;
}

#content {
  position: relative;
}

.main-container {
  display: flex;
}


/* Style the top navigation bar */

.navbar {
  overflow: hidden;
  background-color: grey;
  z-index: 5;
}

.navbarWrapper {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  z-index: 99;
}


/* Style the navigation bar links */

.navbar a {
  float: left;
  font-size: 16px;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}


/* Style the Side bar */

.sidenav {
  flex-shrink: 0;
  position: sticky;
  top: 45px;
  min-height: 100%;
  width: 200px;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: width 0.5s;
  padding-top: 20px;
  margin-right: 20px;
}

.sidenav__links {

}

.sidenav--is-closed {
  width: 0;
}

.sidenav a {
  padding: 6px 6px 6px 20px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidePanaelclosebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  cursor: pointer;
}


/* Change color on hover */

.navbar a:hover {
  background: #ddd;
  color: black;
}

.sidenav a:hover {
  color: white;
}

<div class="header">
  <h1>TEST</h1>
  <p>TEST</p>
</div>

<div class="navbarWrapper">
  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Contact</a>
  </div>
</div>

<div class="main-container">
  <div id="sidenav" class="sidenav">
    <div class="sidenav__links">
      <a onclick="closeNav()" class="sidePanaelclosebtn">&times;</a>
      <a href="#">Link1</a>
      <a href="#">Link2</a>
      <a href="#">Link3</a>
      <a href="#">Link4</a>
      <a href="#">Link5</a>
    </div>
  </div>

  <div id="wrapper">
    <div id="content">
      <span class="threeDashLines" onclick="openNav()">&#9776;</span>
      <h3>Main content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam est ac dolor auctor vestibulum. Duis tristique metus non diam pulvinar et vehicula elit venenatis. Aliquam vel convallis tellus. Aliquam erat volutpat. Ut venenatis, ligula ut
        aliquam imperdiet, quam nisl ultricies leo, eu laoreet arcu erat nec ante. Praesent ullamcorper faucibus dapibus.</p>
      <p>Vivamus metus lacus, iaculis eget varius quis, ultrices in mi. Curabitur ut nisl libero. Nunc lobortis pellentesque mauris rhoncus rutrum. Proin nec auctor augue. Aliquam erat volutpat. Curabitur libero sapien, blandit vel ultrices sed, accumsan
        fringilla erat. Pellentesque consequat neque eu eros elementum ac consectetur sapien gravida. Phasellus sit amet purus vel turpis feugiat porttitor.</p>
      <p>Sed mollis, ligula in vulputate dapibus, urna arcu dictum leo, ac semper nisi risus elementum elit. Aliquam euismod lacus massa. Morbi fermentum mattis faucibus. Aenean ultrices, enim non pulvinar dictum, nibh orci tempor quam, a pretium augue quam
        sed lectus. Nullam auctor, nunc a dignissim pretium, lacus mauris dictum elit, et faucibus risus augue id risus. Curabitur mollis vestibulum augue, sed vulputate orci consectetur quis. Cras vel mollis urna. Ut eu fermentum elit.</p>
      <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla
        sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
      <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla
        sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
      <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla
        sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
      <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla
        sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
      <p>Praesent vitae erat non ipsum commodo congue. In hac habitasse platea dictumst. Sed aliquet enim ut libero lacinia tincidunt euismod magna sagittis. Morbi eu metus velit. Ut lorem ipsum, rutrum sit amet malesuada quis, tincidunt et purus. Nulla
        sem sapien, hendrerit non egestas vehicula, mattis quis velit. Praesent luctus sapien eu tortor aliquet condimentum ac et mauris.</p>
    </div>
  </div>
</div>