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

var initialH = $('#arrow').offset().top;
console.log(initialH);
var lastScrollTop=0;
function scroll_style() {
   var $arrow = $('#arrow'),
       arrow_top = $('#arrow').offset().top,
       window_top = $arrow.offset().top + $arrow.outerHeight(),
       div_top = $('#footer').offset().top;
    var st = $(this).scrollTop();
        //Scroll down
       if (st > lastScrollTop){
            if (window_top > div_top){
               $arrow.css({position:'absolute',bottom:0,top:"auto"});
               }

       } else { //scroll up
           console.log(initialH+"     "+arrow_top+"       "+$(window).scrollTop());
           if (arrow_top >= (initialH + $(window).scrollTop())){//like this
               $arrow.css({position:'fixed',top:initialH, bottom:"auto"});
               }
          
         
       }
       lastScrollTop = st;

  
   
}
$(function() {
  $(window).scroll(scroll_style);
  scroll_style();
 });