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

// scroll listener that continuously gets user's scroll position on the page
/* PSEUDO CODE:
    1. get user scroll position - by default on top of page show bounce arrow
    2. while scrolling, hide bounce arrow
    3. if there's more content, delay about 2-3 seconds before appearing the bounce arrow again while not scrolling / else - hide it
*/
var scrollPos;
    
$(window).on('scroll', function(){
        
    $('.bounce').hide(); // hide the bouncing arrow
    scrollPos = $(window).scrollTop(); // gets the vertical scroll position
        
    // check if scrollbar has reach end of page
    if(scrollPos == ($(document).height() - $(window).height()))
    {
        $('.bounce').hide();
    }
    else if(scrollPos == 0) // scrollbar at top of page
    {
        $('.bounce').delay(800).fadeIn(300);
    }
        
});
    
// 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(){
    $('.bounce').fadeIn(300);
        
    if(scrollPos == ($(document).height() - $(window).height()))
    {
        $('.bounce').hide();
    }
}, 800);


// WHEN FOOTER COMES IN VIEW HIDE ARROW
  $(document).ready(function(){
        $('footer').on('inview', function(event, isInView) {
          if (isInView) {
            // element is now visible in the viewport
              $('.bounce').hide();
              //$('.bounce').css('display','none');
              //$(".bounce").css("cssText", "display: none !important;");
              $('.bounce').attr("style", "display: none !important");
              console.log('element visible');
              $('#text-status').text("Footer Visible");
          } else {
            // element has gone out of viewport
              $('.bounce').show();
              console.log('element not visible');
              $('#text-status').text("Footer Not Visible");
          }
        });
  });