JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
    <div id='first'>my story...</div>
    <div id='footer'>so this is it then...?</div>
    <div id='content'>some boring stuff here</div>
</div>

CSS

.fixed { /* the class that will be applied */
    position:fixed;
    bottom:0;
}
#first { /* css id selectors */
    background-color:beige;
    height:800px;
}
#footer {
    background-color:OrangeRed;
    height:50px;
}
#content {
    background-color:DarkCyan;
    height:300px;
}
div>div { /* pretify divs inside div */
    margin-top:5px;
    padding:30px;
    font-family:Open Sans;
    text-align:center;
}
div div:before { /* to center vertically */
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
#main {
    background-color:Lavender;
    width: 300px;
    margin:auto;
    padding:5px;
}
html, body { /* sneaky */
    width:100%;
    height:100%;
}

JavaScript

$footer = $('#footer');
  $win = $(window);
  var ipos = $footer.offset().top;
  var wpos, space, width;
  width = $footer.width();

  function h(e) {
      wpos = $win.scrollTop();
      space = $win.height() - $footer.height();
      if ((wpos + space) > ipos) {
          $footer.addClass('fixed');
          $footer.width(width);
      } else {
          $footer.removeClass('fixed');

      }
  }


  $(window).scroll(h);