JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="social-float-parent">
  <div id="social-float">
    float...
  </div>
</div>
<div id="footer">
</div>

CSS

div.social-float-parent {
  width: 100%;
  height: 1000px;
  background: #f8f8f8;
  position: relative;
}

div#social-float {
  width: 200px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  background: #777;
}

div#footer {
  width: 100%;
  height: 200px;
  background: #eee;
}

JavaScript

function checkOffset() {
  if ($('#social-float').offset().top + $('#social-float').height() >= $('#footer').offset().top - 10)
    $('#social-float').css('position', 'absolute');
  if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
    $('#social-float').css('position', 'fixed'); // restore when you scroll up
  $('#social-float').text($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
  checkOffset();
});