jQuery - display button dependent on the section in the viewport - php

Question

I am making a one page website and would like to show or hide a button dependent on the section id or element that is visible in the view port.
I have a home button that i need to show when the user scrolls down past what is technically the homepage. I am using scrollify to snap scrolls to section with a height value of 100vh.
I have a function to detect if the element in question is in view but the button displays or hides relevant to the page that is loaded not by seaching for the element that would tell the button to show or hide.
I am using the div class text to determine whether to show or hide the home button is there a way to make jquery update and re engage the function when the user has scrolled or moved the page? the pages in question are live on www.testsiteclash.co.uk
Thanks
jquery
$.fn.inView = function(inViewType){
var viewport = {};
viewport.top = $(window).scrollTop();
viewport.bottom = viewport.top + $(window).height();
var bounds = {};
bounds.top = this.offset().top;
bounds.bottom = bounds.top + this.outerHeight();
switch(inViewType){
case 'bottomOnly':
return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
case 'topOnly':
return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
case 'both':
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
default:
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
}
};
$(document).ready(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Html/php
<?php get_header(); ?>
<article id="section_1">
<section class='section' data-section-name="Devon Food Movement">
<div class="container">
<div class="logo">
<div class="logo-image">
</div>
</div>
<div class="text">
<h1>Devon Food Movement</h1>
<h2>Website under construction <br class="textbreak">follow us below on ...</h2>
</div>
<div class="icons">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon3m"></div>
</div>
</div>
</section>
</article>
<article id="section_2">
<section class='section' data-section-name="Contact">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
get_template_part('form');
endwhile;
else:
echo '<p>No Content found</p>';
endif;
?>
</section>
</article>
<div class="home-btn"><i class="fas fa-home"></i></div>
</body>
</html>

Answer 1

Added scroll to the function all works now, noob alert haha!
$(document).scroll(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});

Answer 2

Here is a simplistic example that shows how to use the window.scroll event to detect whether to show/hide a button.
var currPos=1, lastPos=0, scrollDir='dn';
var triggerPos = $('#myTrigger').offset().top;
$(window).scroll(function(){
currPos = $(window).scrollTop();
$('#d2').html(currPos); //unnecc - displays current scroll position for you
scrollDir = (currPos > lastPos) ? 'dn' : 'up';
lastPos = currPos;
if (scrollDir=='dn'){
if (currPos > triggerPos) $('#btnSpecial').fadeIn(100);
}else{
if (currPos < triggerPos) $('#btnSpecial').fadeOut(100);
}
});
.dPage{width:100vw;height:100vh;}
#d1{background:palegreen;}
#d2{background:bisque;}
#d3{background:lightpink;}
#d4{background:purple;}
#d5{background:lightblue;}
#btnSpecial{display:none;position:fixed;top:30px;right:100px;padding:10px;background:dodgerblue;color:white;font-size:2.3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dPage" id="d1"></div>
<div class="dPage" id="d2"><div id="myTrigger"></div></div>
<div class="dPage" id="d3"></div>
<div class="dPage" id="d4"></div>
<div class="dPage" id="d5"></div>
<button id="btnSpecial">La Button</button>