JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
     <div id="arrow"></div>
</div>
<div id="footer">
</div>

CSS

#body {
   width:100%;
    height:800px;
    position:relative;
}
#footer {
    width:100%;
    height:500px;
    background-color:yellow;
    float:left;
    position:relative;
}

#arrow {
	position:fixed;
    width:20px;
    height:80px;
    background-color:black;
	top:160px;
	left:0;
	right:0;
	margin:0 auto;
    z-index:1000;
}

JavaScript

function scroll_style() {
   var $arrow = $('#arrow'),
       window_top = $arrow.offset().top + $arrow.outerHeight(),
       div_top = $('#footer').offset().top;

   if (window_top > div_top){
		$arrow.css({position:'absolute',bottom:0,top:"auto"});
   }
   if (window_top < div_top){
		$arrow.css({position:'fixed',bottom:0,top:"auto"});
   }
}
$(function() {
  $(window).scroll(scroll_style);
  scroll_style();
 });