How to make the left sidebar fixed while scrolling down the page - html

Question

I have a left sidebar and a main menu.....i need to keep the left sidebar fixed while scrolling down the page....but am not getting it.
This is my code.
Can anyone help me how to do it?
<div class="nav-wrapper">
<!-- START Left navbar-->
<ul class="nav navbar-nav">
<li>
<!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
<a href="" data-toggle-state="aside-collapsed" class="hidden-xs">
<em class="fa fa-navicon"></em>
</a>
<!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
<a href="" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
<em class="fa fa-navicon"></em>
</a>
</li>
</ul>
<!-- END Left navbar-->
<!-- START Right Navbar-->
<ul class="nav navbar-nav navbar-right">
<!-- <li>
<a href="" data-search-open="">
<em class="icon-magnifier"></em>
</a>
</li> -->
<!-- Fullscreen (only desktops)-->
<!-- <li class="visible-lg">
<a href="" data-toggle-fullscreen="">
<em class="fa fa-expand"></em>
</a>
</li> -->
<li class="dropdown user">
<!-- <span style="color: #ddd;"></span> -->
<a title="Log Out" style="text-decoration: none; box-shadow:0px 0px 0px; cursor: pointer;" class="dropdown-toggle"
data-toggle="dropdown" data-hover="dropdown"
data-close-others="true">
{{loggedInUser.userFirstName}} {{loggedInUser.userLastName}} <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-sign-out"></i> Log Out</li>
</ul>
</li>
</ul>
</div>

Answer 1

Use position:fixed;overflow:auto; on the left one. You may need to adjust the position of the right one. Use position:relative; on the right panel.