title: jQuery - display button dependent on the section in the viewport
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p>Thanks</p>
  
  <p>jquery</p>
  
  <pre><code>    $.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 &lt;= viewport.bottom) &amp;&amp; (bounds.bottom &gt;= viewport.top));
            case 'topOnly':
              return ((bounds.top &lt;= viewport.bottom) &amp;&amp; (bounds.top &gt;= viewport.top));
            case 'both':
              return ((bounds.top &gt;= viewport.top) &amp;&amp; (bounds.bottom &lt;= viewport.bottom));         
            default:     
              return ((bounds.top &gt;= viewport.top) &amp;&amp; (bounds.bottom &lt;= 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');
  
          }
  
      });
  </code></pre>
  
  <p>Html/php</p>
  
  <pre><code>    &lt;?php get_header(); ?&gt;
      &lt;article id="section_1"&gt;
          &lt;section class='section' data-section-name="Devon Food Movement"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="logo"&gt;
                      &lt;div class="logo-image"&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="text"&gt;
                  &lt;h1&gt;Devon Food Movement&lt;/h1&gt;
                      &lt;h2&gt;Website under construction &lt;br class="textbreak"&gt;follow us below on ...&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;div class="icon1"&gt;&lt;a href="https://www.linkedin.com/in/luke-fearon-853606158/" target="_blank"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="icon2"&gt;&lt;a href="http://testsiteclash.co.uk/contact"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="icon3"&gt;&lt;a href="https://www.instagram.com/_u/five_mile_food" target="_blank"&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="icon3m"&gt;&lt;a href="instagram://user?username=five_mile_food"&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/article&gt;
      &lt;article id="section_2"&gt;
          &lt;section class='section' data-section-name="Contact"&gt;
          &lt;?php
          if (have_posts()) : 
          while (have_posts()) : the_post();
  
          get_template_part('form');
  
          endwhile; 
  
          else: 
              echo '&lt;p&gt;No Content found&lt;/p&gt;';
          endif;
  
          ?&gt;
          &lt;/section&gt;
      &lt;/article&gt;
      &lt;div class="home-btn"&gt;&lt;a href="http://testsiteclash.co.uk/"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>