JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<body>
  <div class="header">
    <img src="http://placehold.it/600x401">
  </div>
  <div class="content-parent">
    <div class="content">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
    </div>
  </div>
  <div class="footer-content">
  Footer
  </div>
</body>

CSS

.footer-content {
  background-color: blue;
}

JavaScript

/* Waits for the page to load to run calculations */

var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();

function checkScroll() {
  if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
    $stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
  } else {
    $stickyChain.css('position', 'static').css('max-width', 'initial');
  }
};

$(window).scroll(function() {
	checkScroll();
});

/* Updates the $fixedWidth variable on resize */
$(window).resize(function() {
  $fixedWidth = $('.content').parent().width();
  $(window).scroll();
});