title: Show div after scroll with JQuery, and hide again
body: <p>I need to only show a div once I scroll out of 800px and hide it again once I get as far as the page's <code>#prefooter.</code>  </p>
  
  <p>Here is my <a href="https://jsfiddle.net/gavinfriel/1as00k6x/13/" rel="nofollow noreferrer">Fiddle</a> </p>
  
  <p>I have two bodies of Jquery that work independently however I need them to work together - 
  I'm not much of a front end dev so your help is much appreciated! </p>
  
  <pre><code>//Only Show when scrolled passed 800px
  
  $(document).ready(function() {
    $(document).scroll(function() {
      var y = $(this).scrollTop();
      var tabwrap = $('.cta-bar');
      console.log("im working");
      if (y &gt; 800) {
        console.log(y);
        console.log("greater");
        tabwrap.removeClass("hide");
        tabwrap.addClass("show");
      } else {
        console.log(y);
        console.log("lesser");
        tabwrap.removeClass("show");
        tabwrap.addClass("hide");
      }
    });
  });
  
  
  //Hide When Passed Pre-Footer
  
  $(document).ready(function() {
    var $window = $(window);
    var tabwrap = $('.cta-bar');
    var prefooter = $('#preFooter');
    var prefooter_top = prefooter.offset().top;
    var prefooter_height = prefooter.height();
    var prefooter_bottom = prefooter_top + prefooter_height;
    $window.on('scroll', function() {
      var scrollTop = $window.scrollTop();
      var viewport_height = $(window).height();
      var scrollTop_bottom = scrollTop + viewport_height;
      if (scrollTop_bottom &gt; prefooter_top) {
        tabwrap.removeClass("show");
        tabwrap.addClass("hide");
      } else {
        tabwrap.removeClass("hide");
        tabwrap.addClass("show");
      }
    });
  });
  </code></pre>