JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<header class='headerLeft'>
		<div class='headerWrap'>
			<div class='menuMain'>
			<nav>
				<ul>
					<li><a href=''>Home</a></li>
					<li><a href=''>About Us</a></li>
					<li><a href=''>Procedures</a></li>
					<li><a href=''>Photo Gallery</a></li>
					<li><a href=''>Videos</a></li>
					<li><a href=''>Blog</a></li>
					<li><a href=''>Email Us</a></li>
					<li><a href=''>Contact Details</a></li>
				</ul>
			</nav>
			</div>
			<div class='searchWp'>
				<form>
					<button type="submit" class="fa fa-search leftButton"></button>
					<input type='text' value='Search' class='leftSearch'>
					<div class='clear'></div>
				</form>
			</div>
			
			<div class="contactOptionLeft">
				<div class='phone_number'>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
				</div>
				<div class='issueCenter'>
					lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
					lorem ipsum dolar smeth <br>
				</div>
				
			</div>
		</div>
	</header>
	<div role="main" class='mainContent'>
		Lorem ipsum dolor sit amet, his ne posse appellantur, ea primis reprimique cum. Lorem dolorum debitis usu id, harum nostro sanctus ne per, discere vocibus pertinax eos ea. Mei aliquam evertitur eu, mel ea tota brute illud. Ut adhuc accusamus usu, sit autem debet id.

Te pri habeo interesset, duo malis nulla recusabo ei. Ex ferri etiam sea, no illud ignota nam, porro zril sit ex. Erat minim...

CSS

.headerLeft {
    position:fixed;
    min-height: 200px;
    min-width: 207px;
    width: 15%;
    background:#EEE9E2;
}
.mainContent{
    left:46%;
    position:relative;
}

JavaScript

$.fn.isOnScreen=function(){var e=$(window);var t={top:e.scrollTop(),left:e.scrollLeft()};t.right=t.left+e.width();t.bottom=t.top+e.height();var n=this.offset();n.right=n.left+this.outerWidth();n.bottom=n.top+this.outerHeight();return!(t.right<n.left||t.left>n.right||t.bottom<n.top||t.top>n.bottom)}
// above is a plugin I am using to check whether the div is visible

jQuery(document).ready(function() {
    jQuery(window).scroll(function(){
        console.log(jQuery('.headerWrap').isOnScreen());
        if(!jQuery('.headerWrap').isOnScreen()){
            jQuery(".headerWrap").css({"margin-top": ($(window).scrollTop()) + "px"});
        }
        else{
            // if I uncomment this it works but the sidebar blinks and donot appear fully
            //jQuery(".headerWrap").css({"margin-top": "0px"});
        }
    });
});