JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
	<div class="row">
		<div class="col-xs-8">
			
			<div id="1" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="2" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="3" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="4" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="5" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="6" class="test-div">
				<h2>Header</h2>
			</div>
			<div id="7" class="test-div">
				<h2>Header</h2>
			</div>

		</div>

		<div class="col-xs-4">
			<div data-spy="affix">
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
                sub menu will go here<br/>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12 footer">Footer</div>
	</div>
</div>

CSS

body {
			padding-top: 200px;
		}
		.test-div {
			min-height: 400px;
			border: 1px solid #D1D1D1;
			margin-bottom: 10px;
		}
		.footer {
			border: 1px solid red;
			height: 500px;
		}
.affix{  top: 0; border: 1px solid red; font-size: 11px; padding: 4px;}
.affix-bottom{position: absolute;}

JavaScript

var pos = $('.test-div').eq(0).offset();
var pos_foot = $('.footer').height();

$('[data-spy="affix"]').attr("data-offset-top",pos.top);
$('[data-spy="affix"]').attr("data-offset-bottom",pos_foot);