W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
body {
 margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
 background-color: #555555;
 color: white;
}
</style>
</head>
<body>

<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:130px;padding:1px 16px;height:1000px;">
 <h2>Full-height Vertical Navbar</h2>
 <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
 Notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
 Some text..
</div>

</body>
</html>