JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div id="header"><h1>Demo: jQuery Sticky Content</h1></div>
		<div id="main">
			<div id="sidebar">
				<div id="widget" class="static">
					<h2>Static Widget</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
				</div>
				<div id="widget" class="sticky">
					<h2>Sticky Widget</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
				</div>
			</div>
			<div id="article">
				<p>To read the article explaining this demo, <a href="http://andrewhenderson.me/tutorial/jquery-sticky-content/" title="Andrew Henderson | jQuery Sticky Content">Click Here</a> | <a href="http://andrewhenderson.me/tutorial/jquery-sticky-content/jquery-sticky-content.zip">Download</a></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum lacus sed velit luctus tempus. Ut bibendum gravida rutrum. Phasellus et ipsum id ante interdum laoreet. Vivamus pharetra tortor sed libero interdum at volutpat arcu cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas porta tempor ullamcorper. Curabitur quis elit nisl. In tincidunt, purus eget commodo pretium, libero mauris egestas sem, in vestibulum sem lacus ac odio. Donec pharetra tristique nulla, non scelerisque mauris auctor in. Sed elit mauris, pellentesque sed iaculis id, condimentum eget sem. Maecenas at enim mi. Duis non nunc justo, vitae tristique purus. Quisque sagittis convallis elementum.</p>

				<p>Donec sed lectus tellus. Cras felis leo, imperdiet a interdum in, vestibulum eu quam. Donec elit est, interdum eget mattis quis, semper ac est. Nam dignissim ultrices risus, a ornare justo pretium vitae. Quisque vitae pellentesque mauris. Cras consectetur laoreet adipiscing. Morbi placerat, elit et...

CSS

#wrapper { 
	width:960px;
	margin:0 auto;
}
#header {
	border-bottom:1px solid #ccc;
	padding:10px 0;
}
#sidebar {
	float:right;
	width:240px;
}
	#sidebar #widget {
		width:240px;
		margin-bottom:10px;
		border-bottom:1px solid #ccc;
	}
#article {
	width:660px;
	padding-right:30px;
	border-right:1px solid #ccc;
}
#footer {
	border-top:1px solid #ccc;
	padding:10px;
}

JavaScript

if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

	var stickyTop = $('.sticky').offset().top; // returns number 

		$(window).scroll(function(){ // scroll event

			var windowTop = $(window).scrollTop(); // returns number 

			if (stickyTop < windowTop){
				$('.sticky').css({ position: 'fixed', top: 0 });
			}
			else {
			$('.sticky').css('position','static');
		}

	});

}