JSFiddle - React, Tailwind, and code Playground

by pranaigiri

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<nav class="sidebar-navigation">
	<ul>
		<li class="active">
			<i class="fa fa-share-alt"></i>
			<span class="tooltip">Connections</span>
		</li>
		<li>
			<i class="fa fa-hdd-o"></i>
			<span class="tooltip">Devices</span>
		</li>
		<li>
			<i class="fa fa-newspaper-o"></i>
			<span class="tooltip">Contacts</span>
		</li>
		<li>
			<i class="fa fa-print"></i>
			<span class="tooltip">Fax</span>
		</li>
		<li>
			<i class="fa fa-sliders"></i>
			<span class="tooltip">Settings</span>
		</li>
			<li>
			<i class="fa fa-hdd-o"></i>
			<span class="tooltip">Devices</span>
		</li>
		<li>
			<i class="fa fa-newspaper-o"></i>
			<span class="tooltip">Contacts</span>
		</li>
		<li>
			<i class="fa fa-print"></i>
			<span class="tooltip">Fax</span>
		</li>
		<li>
			<i class="fa fa-sliders"></i>
			<span class="tooltip">Settings</span>
		</li>
			<li>
			<i class="fa fa-hdd-o"></i>
			<span class="tooltip">Devices</span>
		</li>
		<li>
			<i class="fa fa-newspaper-o"></i>
			<span class="tooltip">Contacts</span>
		</li>
		<li>
			<i class="fa fa-print"></i>
			<span class="tooltip">Fax</span>
		</li>
		<li>
			<i class="fa fa-sliders"></i>
			<span class="tooltip">Settings</span>
		</li>
	</ul>
</nav>

CSS

* {
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 line-height: 1;
}
 body {
	 background-color: #f5f6f8;
	 overflow: hidden;
}
 .sidebar-navigation {
	 display: inline-block;
	 width: 80px;
	 background-color: #313443;
	 float: left;
   overflow-y: scroll;
   height: 100vh;
}
 .sidebar-navigation ul {
	 text-align: center;
	 color: white;
}
 .sidebar-navigation ul li {
	 padding: 28px 0;
	 cursor: pointer;
	 transition: all ease-out 120ms;
}
 .sidebar-navigation ul li i {
	 display: block;
	 font-size: 24px;
	 transition: all ease 450ms;
}
 .sidebar-navigation ul li .tooltip {
	 display: inline-block;
	 position: absolute;
	 background-color: #313443;
	 padding: 8px 15px;
	 border-radius: 3px;
	 margin-top: -26px;
	 left: 90px;
	 opacity: 0;
	 visibility: hidden;
	 font-size: 13px;
	 letter-spacing: 0.5px;
}
 .sidebar-navigation ul li .tooltip::before {
	 content: '';
	 display: block;
	 position: absolute;
	 left: -4px;
	 top: 10px;
	 transform: rotate(45deg);
	 width: 10px;
	 height: 10px;
	 background-color: inherit;
}
 .sidebar-navigation ul li:hover {
	 background-color: #22252e;
}
 .sidebar-navigation ul li:hover .tooltip {
	 visibility: visible;
	 opacity: 1;
}
 .sidebar-navigation ul li.active {
	 background-color: #22252e;
}
 .sidebar-navigation ul li.active i {
	 color: #98d7ec;
}

JavaScript

var sidebar = document.getElementsByClassName("sidebar-navigation")[0];
var tooltips = document.querySelectorAll(".tooltip");

sidebar.addEventListener('scroll', (event) => {
    //console.log(sidebar.scrollTop);

    tooltips.forEach(tooltip => {
        tooltip.style.marginTop = -26 - sidebar.scrollTop+"px"; 
        //-26 is the default marginTop value of tooltip
    });

    console.log(sidebar.scrollTop);


});