JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div_menu">
<ul id="ul_menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li id="test"></li>
</ul>
</div>
<div id="div_header">
<div class="cloumn right" id="div_right">check</div>
<div class="cloumn center" id="div_center">
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">21313 </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">aaaaaa </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">bbbbb </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">ccccc </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">ddddd </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
</div>
<div class="cloumn left" id="div_left">check</div>
</div>
</div>
CSS
body {
margin-top: 0 !important;
}
.selected {
position: fixed;
}
#right_inside_center img {
width: 97%;
margin-top: 7px;
}
#left_inside_center{
float:left; width:25%;
}
#right_inside_center{
float:right;width:65%;
}
#inside_center {
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
#div_menu {
width: 99%;
overflow: hidden;
height: auto;
border-radius: 5px;
background-color: yellow;
text-align: center;
position: fixed;
}
#ul_menu{
padding-left: 0 !important;
}
#ul_menu li {
display: inline;
list-style-type: none;
padding-right: 20px;
text-decoration: none;
}
#ul_menu li a {
list-style-type: none;
text-decoration: none;
}
#div_header {
text-align: center;
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
padding-top: 50px;
}
.cloumn {
display: table-cell;
}
.center {
-webkit-box-shadow: 0px 0px 5px 2px rgba(40, 40, 40, 0.62);;
-moz-box-shadow: 0px 0px 5px 2px rgba(40, 40, 40, 0.62);;
box-shadow: 0px 0px 5px 2px rgba(40, 40, 40, 0.62);;
background: rgba(240, 240, 240, 0.2);
border-radius: 10px;
height: 5000px;
width: 60%;
}
.left {
background-color: green;
position: fixed;
width: 18%;
}
.right {
background-color: green;
position: fixed;
width: 18%;
}
JavaScript
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
var height = parseInt($(".right_side").css("height").split("px")[0]);
$(".left_side").css({'position':'static','top':'auto'});
$(".left_side").filter(function( ) {
return $(this).position().top - 10 < scrollVal && $(this).position().top + height > scrollVal;
}).css({'position':'fixed','top' :navHeight+'px'});
});
});