JSFiddle - React, Tailwind, and code Playground

by Tetaxa

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<div class="container">
    <h1>Header</h1>
<div class="row">
    <div class="col-xs-8">
    <p>Lorem ipsum dolor</p>
    </div>
    <div class="col-xs-4">
        <div class="affixed-div">
            Affixed
        </div>
    </div>
</div>
    <h2>Other header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in erat porta, iaculis diam et, vulputate ipsum. Praesent vulputate ultrices dolor, at adipiscing libero. Sed vel augue sed neque egestas adipiscing non et tellus. Etiam sit amet aliquet mi, nec feugiat est. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eros ante, eleifend eget sagittis lacinia, tempus at est. Vivamus quis risus nibh. Aenean at euismod massa. Nam eleifend lacus ut sapien consequat imperdiet. Vestibulum ipsum quam, tempor a felis in, laoreet eleifend tellus. Maecenas turpis sapien, fermentum vel blandit non, porttitor sagittis massa. Morbi eu dui eget neque tempor faucibus at vel elit. Vestibulum mollis hendrerit ligula non interdum. Aliquam ut tempor nunc, ac euismod augue. In mattis nisi justo, id rhoncus nulla posuere in.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in erat porta, iaculis diam et, vulputate ipsum. Praesent vulputate ultrices dolor, at adipiscing libero. Sed vel augue sed neque egestas adipiscing non et tellus. Etiam sit amet aliquet mi, nec feugiat est. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eros ante, eleifend eget sagittis lacinia, tempus at est. Vivamus quis risus nibh. Aenean at euismod massa. Nam eleifend lacus ut sapien consequat imperdiet. Vestibulum ipsum quam, tempor a felis in, laoreet eleifend tellus....

CSS

.affixed-div {
    background: tomato;
    height: 200px;
}

.row {
    background: lavenderblush;
}

.affix {
    top: 0;
}

.affix-bottom {
    position: relative;
}

JavaScript

var div = $('.affixed-div');
var row = div.closest('.row');

div.affix({
    offset: {
        bottom: $(document).height() - row.offset().top - row.height(),
        top: div.offset().top
    }
});