JSFiddle - React, Tailwind, and code Playground

by Dylan Schadeck

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="content">
    <span>scroll down please</span>
</div>
<div id="post"></div>

CSS

#content {
    height: 4000px;
    padding: 1em;
}
span {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: green;
    position: relative;
}
span:after {
    content: "";
    position: absolute;
    bottom: -1.3em;
    left: 45%;
    width: 0; 
	height: 0; 
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-top: 1em solid green;
}

#post { 
    position: fixed;
    top: 0;
    right: 0;
    background: #666;
    color: #fff;
    padding: .5em;
}

JavaScript

$(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $('#post').html("you've reached the bottom");
   } else {
     $('#post').html("not there yet");  
   }
});