JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="header">Header</div>

<div id="to-affix">Element to be affixed</div>

<div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lectus aliquet risus imperdiet laoreet. In hac habitasse platea dictumst. Aenean vel convallis sapien. Proin sit amet condimentum orci. Mauris vestibulum eros non purus tristique dapibus. Donec tincidunt est eu rutrum mattis. Aliquam in orci a metus pulvinar vestibulum id id massa. Curabitur suscipit vel metus non egestas. Nunc consectetur volutpat quam, a varius quam posuere blandit. Donec nisl ipsum, rutrum sit amet sem dictum, egestas elementum dolor. Suspendisse dictum, mi eget aliquam interdum, sapien erat sodales velit, ac tristique est velit eu quam. Mauris ipsum libero, maximus in dapibus vel, faucibus non ipsum. Aliquam facilisis in ex in volutpat. Vivamus feugiat a tortor in vulputate. Donec nunc diam, scelerisque non mi id, pretium sollicitudin nulla. Vestibulum rutrum lectus et efficitur mattis.</p>

<p>Donec nisi lorem, dapibus eget ligula in, iaculis consectetur elit. Quisque facilisis neque leo, in accumsan velit aliquet ac. Curabitur suscipit lorem ac lectus condimentum efficitur. Nullam ut finibus erat. Phasellus iaculis scelerisque sapien eget aliquam. Etiam a facilisis ex, id dapibus quam. Nullam tincidunt lobortis lectus in fermentum. Nullam nisi orci, vestibulum in nisi eget, tempor commodo dui. In posuere ligula arcu, in elementum leo euismod sit amet. Nulla nisi mauris, sagittis eget risus vel, tincidunt ornare odio.</p>

<p>Duis quis nibh nisi. Mauris mollis quis nisl eget vulputate. Sed ullamcorper aliquet orci, quis mollis lacus tincidunt sit amet. Fusce nec tellus accumsan, luctus nisl quis, auctor magna. Nam sit amet viverra ex, sed ornare sem. Integer lobortis odio at velit...

CSS

#header {
    background-color:gray;
    height:100px;
}

#to-affix {
    background-color:red;
    height:50px;
}

#to-affix.affix {
    top:0;
    left:0;
    right:0;
}

/* this is the important one */
#main.padded {
    padding-top:50px;
}

JavaScript

$("#to-affix").affix({
	offset: 100
});

// add padding element above is affixed
$("#to-affix").on("affix.bs.affix", function() {
  $("#main").addClass("padded");
});

// and remove again when unaffixed
$("#to-affix").on("affix-top.bs.affix", function() {
  $("#main").removeClass("padded");
});