Show div after scroll with JQuery, and hide again

Question

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 #prefooter.

Here is my Fiddle

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!

//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 > 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 > prefooter_top) {
      tabwrap.removeClass("show");
      tabwrap.addClass("hide");
    } else {
      tabwrap.removeClass("hide");
      tabwrap.addClass("show");
    }
  });
});

Answer 1

All you need is to define an if block for each of the three states since they are mutually exclusive. Now, one heads up: this solution, as is, is adding and removing classes ON EVERY SCROLL TRIGGER, which is a lot and very inefficient, try adding a boolean var to swap classes only once every time tabwrap enters/leaves a state, something like bool changed; , I'll leave it to you then.

 $(document).ready(function() { var prefooter = $('#preFooter'); var prefooter_top = prefooter.offset().top; console.log(prefooter_top); var viewport_height = $(window).height(); var tabwrap = $('.cta-bar'); $(document).scroll(function() { var y = $(this).scrollTop(); //console.log("im working"); var scrollTop = $(this).scrollTop(); var scrollTop_bottom = scrollTop + viewport_height; if (y <= 800) { console.log(y, "lesser"); tabwrap.removeClass("show").addClass('hide'); } else if (scrollTop_bottom <= prefooter_top) { console.log(y, "greater"); tabwrap.removeClass("hide").addClass("show"); } else { tabwrap.removeClass("show").addClass("hide"); console.log(y, 'end'); } }); }); 

 .cta-bar{ position: fixed } .cta-bar.hide{ display: none } #preFooter{ height: 100px; bottom: 0 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cta-bar hide">fdfd</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <footer id="preFooter">footer</footer> 

Answer 2

Combine your check inside one condition,if greather than 800px and less than top of prefooter Or greater thant bottom of prefooter then show , otherwise hide that div

if( (scroll > 800 && scroll < scrollTopHeight) || scroll > scrollBottomHeight)

See below snippet :

 $(function(){ var preFooterTop = $("#preFooter").offset().top var preFooterHeight = $("#preFooter").height(); var preFooterOffset = preFooterTop - preFooterHeight; var $tabwrap = $('.cta-bar'); $tabwrap.addClass("hide"); $(window).on("scroll",function(){ var scroll = $(this).scrollTop(); //console.log(scroll,preFooterOffset); var viewport_height = $(window).height(); var scrollTopHeight = preFooterOffset + viewport_height; var scrollBottomHeight = preFooterTop + viewport_height; if( (scroll > 800 && scroll < scrollTopHeight) || scroll > scrollBottomHeight) { $tabwrap.removeClass("hide"); if(!$tabwrap.hasClass("show")) $tabwrap.addClass("show"); } else { $tabwrap.removeClass("show"); if(!$tabwrap.hasClass("hide")) $tabwrap.addClass("hide"); } }); }) 

 body { background-color: #fff; padding: 20px; min-height: 900px; } #preFooter { background: red; height: 600px; margin-top: 2200px; } #footer { background: blue; height: 300px; } /* - - - - - - - - - - - - - - - - - - - */ .cta-bar { z-index: 10000; position: fixed; max-width: 840px; left: 20px; right: 20px; bottom: 30px; background: #fff; color: #323a45; margin: 0 auto; border-radius: 10px; padding: 10px 20px 10px 20px; cursor: pointer; -webkit-box-shadow: 0 0 25px 4px rgba(69, 79, 91, 0.1); box-shadow: 0 0 25px 4px rgba(69, 79, 91, 0.1); -webkit-transition: -webkit-transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955); -webkit-transition: transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955); transition: transform .3s cubic-bezier(0.455, 0.030, 0.515, 0.955), box-shadow .3s cubic-bezier(0.455, 0.030, 0.515, 0.955); transition: all .7s ease-in-out; } .cta-bar.show { margin-bottom: 0px; } .cta-bar.hide { margin-bottom: -200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="preFooter"> <p>pre-footer</p> </div> <div id="footer"> <p>footer</p> </div> <!-- - - - - - - - - - - - - - - - - - --> <div class="cta-bar"> hello </div>