JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>affex - test</title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function () {
	        $('#sidebar').affix(
	            {
	                offset: {
	                    top: 300,
	                    bottom: 700
	                }
	            }
        	);
		});
	</script>

	<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}
		#header {
			height: 300px;
			width: 100%;
			background-color: rgba(0,0,0,0.8);
		}
		#extender {
			height: 1200px;
			width: 90%;
			background-color: rgba(0,0,0,0.1);
		}
		#sidebar {
			height: 200px;
			width: 50px;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			top: 300px;
			right: 0;
		}
		#sidebar.affix {
			position: fixed;
			top: 0;
			right: 0;
		}
		#sidebar.affix-top {
		}
		#sidebar.affix-bottom {
			position: absolute;
			top: 1200px;
		}
		#footer {
			height: 700px;
			background-color: rgba(0,0,0,0.6);
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="header"></div>
	<div id="extender"></div>
	<div id="sidebar"></div>
	<div id="footer"></div>
</body>
</html>