JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://rawgit.com/yckart/jquery.unevent.js/master/jquery.unevent.js"></script>
<script src="https://rawgit.com/mmmeff/jquery.inview2/master/jquery.inview2.min.js"></script>
<div id="text-status" style="position:fixed;right:10px;font-size:40px;">Footer Not Visible</div>
<div class="bounce">
    <i class="fa fa-angle-double-down"></i>
</div>
<div style="height:1000px;background:red;">
  body content
</div>
<footer style="height:100px;background:green;">
  footer content
</footer>

CSS

.fa {
	width: 50px;
	display: block;
	text-align: center;
	color: white;
	font: normal 85px 'FontAwesome';
	line-height: 105px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
.fa-angle-double-down:before {content: "⍗";}
.bounce {
    z-index: 9999 !important;
    opacity: 0.6;
	position: fixed;
	bottom: 30px;
	left: 50% ;
	width: 50px;
	height: 50px;
	margin-left: -30px;
    bottom: 3%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	50% {transform: translateY(-30px);}
	50% {transform: translateY(-15px);}
}

JavaScript

var footerIsVisible = false;
var scrollPos;
    
$(window).on('scroll', function(){      
    $('.bounce').hide(); 
    scrollPos = $(window).scrollTop();        
    if(scrollPos == ($(document).height() - $(window).height())){
        $('.bounce').hide();
    }
        
});
    
// jquery.unevent plugin - when an event hasn't been fired for a specified time (# in milliseconds at end of this function), this event will trigger
$(window).on('scroll', function(){
		if(!footerIsVisible){
   		$('.bounce').fadeIn(300);      
    }     
}, 800);
// WHEN FOOTER COMES IN VIEW HIDE ARROW
  $(document).ready(function(){
        $('footer').on('inview', function(event, isInView) {
          if (isInView) {
              footerIsVisible = true;
              $('#text-status').text("Footer Visible");
          } else {
          		footerIsVisible = false;
              $('#text-status').text("Footer Not Visible");
          }
        });
  });