JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
<ul class="nav flex-column navbar-dark sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque egestas eleifend diam in tincidunt. Cras eget dignissim lacus. Praesent condimentum arcu nisi, ut ultrices lorem imperdiet sed. Suspendisse a elit quis erat volutpat bibendum. Proin metus odio, hendrerit at fermentum quis, suscipit id felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla nec mattis nibh, in dignissim turpis.
Integer sem nulla, malesuada non gravida sit amet, porttitor ac lorem. Nam gravida facilisis pulvinar. Maecenas lacinia tellus in diam pretium gravida. Pellentesque massa tellus, egestas sed odio vitae, convallis mollis massa. Duis at scelerisque nisi. Phasellus eu dapibus orci. Mauris tortor urna,...
CSS
body{
height : 100vh;
overflow : scroll;
}