JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="body">

    <div class="float-el">
      absolute
    </div>

  </div>

  <div class="footer">
asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>asdasd<br>
  </div>

CSS

body {
  margin: 0;
}

.body {
  height: 1000px;
  background: red;
}

.float-el {
  background: green;
  position: fixed;
  right: 0;
  top: 40%;
  height: 300px
}


.footer {
  background: blue;
}

JavaScript

floatEl($('.float-el'));


function floatEl(el) {
  let
    elHeight = el.height(),
    elTop = parseInt(el.css('top')),
    footerTop = $('.footer').offset().top,
    windowHeight = $(window).height();

  $(window).scroll(function() {
    let scrollTop = $(this).scrollTop(),
      visibleFooter = scrollTop + windowHeight - footerTop;

    if (visibleFooter < 0) {
      visibleFooter = 0;
    }

    let visibleBody = windowHeight - visibleFooter;

    if (elTop + elHeight > visibleBody) {
      el.css({
        'top': visibleBody - elHeight
      })
    } else {
      el.css({
        'top': ''
      })
    }
  });
}