JSFiddle - React, Tailwind, and code Playground

by sarfarazdesigner

HTML

<div id="masthead">
</div>

<div id="mainwrap">
	<div id="leftSide">
		<div id="leftCnt">
		Scroll content come here
		</div>
	</div>

	<div id="rightSide">
		<div id="rightTop">
		</div>
		<div id="rightCnt">
			some text
		</div>
	</div>
	<div style="clear:both"></div>
</div>

<div id="footer">
</div>

CSS

*{margin:0; padding:0;}
#masthead{
	background: #f5f5f5;
	height: 150px;
	position: fixed;
	width: 100%;
	z-index: 10000;
}
#footer{
	background:#333333;
	height:400px;
}
#mainwrap{
	position:relative;
	padding:200px 0 100px;
	margin:0 auto;
	width:960px;
}
#leftSide{
	float:left;
	width:660px;
}
#rightSide{
	float:right;
	width:250px;
}
#leftCnt{
	height:2000px;
	width:100%;
	background:yellow;
}
#rightTop{
	background:red;
	height:300px;
	margin-bottom:50px;
}
#rightCnt{
	background:grey;
	width:250px;
	height:500px;
}
#rightCnt.fixed{
	position:fixed;
}

JavaScript

var body = $( "body" );
var 
sticky         = $('#rightCnt'),
footerHit      = $('#footer').outerHeight(true),
footTop        = $('#footer').offset().top,
lastStickyTop  = sticky.offset().top,
mastheadHeight = $('#rightSide').offset().top;



$(window).scroll(function() {

	if(body.scrollTop() > lastStickyTop){
		sticky.css({position:'fixed', top:150});
		console.log('i am in')
	}
	else {    
        sticky.css({position: 'relative',top:      'auto'});
        console.log('else')
    }
	
	var stickyFoot = sticky.offset().top + sticky.height();
    if (stickyFoot > footTop - 15) {
       sticky.css({position:'absolute', top: (footTop -  mastheadHeight) - sticky.height()});
    }
});