JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="background-color: blue;">
  <div class="row some-content-block topmenu">
    <div class="col-sm-6">
      <div class="some-other-content">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="some-other-content">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-10">
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
      <div class="scrollable">
      </div>
    </div>
  </div>
</div>
<footer></footer>

CSS

.container .topmenu
{
  height: auto;
  background-color: transparent;
}

.some-content-block
{
  height: 150px;
  margin-bottom: 5px;
  background-color: red;
}

.some-other-content
{
  height: 130px;
  margin-bottom: 5px;
  background-color: yellow;
}

.scrollable
{
  height: 75px;
  background-color: cyan;
}

footer
{
  height: 200px;
  background-color: green;
}

JavaScript

$(document).ready(function() {	
	var topPadding = 10;
	//Set the scrollable offset before starting the scroll
	var scrollableTopOffset = $(".topmenu").height();
  
  /* I need to make the idea of the following code work: */
  $( window ).resize(function() {
  	scrollableTopOffset = $(".topmenu").height();
  });
  /* End of code what needs to be answered in my question */
	
	$(window).scroll(function () {
		/* To make sure margin-top won't be applied so that the scrollable won't exceed the footer: */
    if(($("footer").offset().top - scrollableTopOffset + topPadding) < $(window).scrollTop())
    {
    	//Do nothing or add 0 margin:
      $(".scrollable").stop().animate({
				marginTop: 0
			});
    }
    /* When scrolling, determine wether the browser window still contains
		scrollable: */
		else if(scrollableTopOffset < $(window).scrollTop())
		{
			//Code when scrollable is within the browser window...
			//$(".scrollable").addClass("scrollable-fixed");
			$(".scrollable").stop().animate({
				marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
			});
		}
		else
		{
			//Code when scrollabe is not within the browser window...
			//$(".scrollable").removeClass("scrollable-fixed");
			$(".scrollable").stop().animate({
				marginTop: 0
			});
		}
	});
});