JSFiddle - React, Tailwind, and code Playground

by Jinhui LEE

HTML

<div style="background: red; width: 200px; height: 440px;">test</div>
<div class="aa" style="background: #ccc; width: 100%; height: 700px;">
	<div id="test1" style="border: 1px solid #000; width: 90%; height: 200px; background: #fff;">asdfasf</div>
</div>
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
<div class="bb" style="background: #ccc; width: 100%; height: 700px;">
	<div id="test2" style="border: 1px solid #000; width: 90%; height: 100px; background: #fff;">asdfasf</div>
</div>
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc...

CSS

body { margin: 0; }
.fixed { position: fixed; top:0; left:0; }

JavaScript

$.fn.Scrolling = function(obj, tar) {
	var _this = this;
	$(window).scroll(function(e) {
		var end = obj + tar;
		$(window).scrollTop() >= obj ? _this.addClass("fixed") : _this.removeClass("fixed");
		if($(window).scrollTop() >= end) _this.removeClass("fixed");
	});
};

$("#test1").Scrolling($("#test1").offset().top, ($(".aa").height() - $("#test1").height()));
$("#test2").Scrolling($("#test2").offset().top, ($(".bb").height() - $("#test2").height()));