JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
  <div id="header">
    <h2>Header</h2>
  </div>
  <div id="left-menu">
	  <ul>
  	  <li id="menu1">Section 1</li>
  	  <li id="menu2">Section 2</li>
  	  <li id="menu3">Section 3</li>
  	  <li id="menu4">Section 4</li>
	  </ul>
	</div>
	<div id="main-content">
    <h3 id="section1">Section 1</h3>
	  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius turpis lectus. Curabitur et purus lacus.
      Phasellus ut sem eget nulla scelerisque accumsan at a neque. Suspendisse sollicitudin, lacus eu gravida aliquam,
      sem elit accumsan sapien, ut molestie quam augue vitae sapien. Pellentesque eget eros hendrerit arcu venenatis
      adipiscing. Donec dictum massa id lectus bibendum ac tristique leo bibendum. Pellentesque iaculis dolor eget magna
      elementum sodales. Cras ornare sem eget ipsum mollis vel egestas orci volutpat. Maecenas urna sem, consectetur id
      vestibulum condimentum, laoreet ut diam. Morbi semper ante et augue pretium non pretium purus vehicula. Vestibulum
      sodales egestas lorem, ac fringilla justo aliquet quis. Nulla felis eros, euismod nec accumsan eu, bibendum quis
      nulla.
    </p>
    <p>
      Integer rhoncus ante eu neque blandit vel pulvinar ligula dapibus. Phasellus consectetur blandit dignissim.
      Curabitur non magna non urna elementum facilisis. Sed nunc orci, suscipit ut vehicula sit amet, dictum vitae
      ipsum. Phasellus dolor urna, auctor eu pharetra eget, ullamcorper eu velit. Pellentesque placerat, turpis vitae
      mollis molestie, est enim consequat diam, eu ullamcorper metus metus ac dolor. Integer porta eros id tellus
      vehicula pretium. Vestibulum vulputate vehicula velit, nec rhoncus libero ornare id. Nulla facilisi. Curabitur
      vitae dignissim turpis. Cras nec metus non orci congue sagittis. Fusce molestie, mi id laoreet tristique, neque mi
      hendrerit diam, et aliquet erat enim at dolor. Sed sit amet sapien augue.
    </p>
    <p>
      Cras...

CSS

/*
	Notes:
  - Requires fixed position header
  - Requires fixed header height
*/
#left-menu li {
  cursor: pointer;
}
#header {
  position: fixed;
  width: 100%;
  height: 80px;
  top:0;
  left:0;
  background-color: #fff;
}
#left-menu {
  position: fixed;
  top: 80px;
  left: 0;
  height: 100%;
  width: 200px;
  overflow: auto;
  background-color: red;
}
#main-content {
  position: fixed;
  top: 80px;
  left: 200px;
  height: 100%;
  overflow: scroll;
  background-color: lightblue;
}

JavaScript

$(function () {
  $('#menu1').on('click', function() {
    $('#main-content').scrollTop($('#section1').position().top);
  });
  $('#menu2').on('click', function() {
    $('#main-content').scrollTop($('#section2').position().top);
  });
  $('#menu3').on('click', function() {
    $('#main-content').scrollTop($('#section3').position().top);
  });
  $('#menu4').on('click', function() {
    $('#main-content').scrollTop($('#section4').position().top);
  });
});