JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
</div>
<div class="box" data-inview="below">
    <div class="box-inner">
    fdsfd
  </div>
</div>
<div>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
  herp<br>
</div>

CSS

.box {
  width:50px;
  height:150px;
  margin-left: 100px;
 }
 
 .box-inner {
   height: inherit;
   width: inherit;
   background-color:red;
 }

[data-inview='below'] .box-inner {
  position: fixed;
   bottom: 0;
}
[data-inview='above'] .box-inner {
  position: fixed;
  top: 0;
}
[data-inview='view'] .box-inner {
  position: relative;
}

JavaScript

function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        var whereAt = '';
				if (elemBottom - docViewBottom > 0) {
        	whereAt = 'below';
        } else if (elemTop - docViewTop < 0) {
        	whereAt = 'above';
        } else {
          whereAt = 'view';
        }
        return (whereAt);
    }

    $(window).scroll(function(){
				var testView = isScrolledIntoView('.box');
        $('.box').attr('data-inview', testView);

    });