Hide Contents When Page Is Scrolling Down In Jquery

I have a contents DIV which is positioned to fixed at bottom of the page. It's HTML and CSS looks like this:

This is its contents......&

Solution 1:

Missing ( , ) around ($(window).scrollTop() + $(window).height() > $(document).height() - 100) at if conditions

$(document).ready(function() {
  var footer = $('.footer-fix');
  $(window).scroll(function() {
    if (($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
        && footer.is(':visible')) {
      footer.stop().fadeOut(300);
    } elseif (($(window).scrollTop() < $(document).height() - 100) 
               && footer.is(':hidden')) {
      footer.stop().fadeIn(300);
    }
  });
});

body {
  height: 520px;
}
.footer-fix {
  background: rgba(255, 255, 255, 0.6);
  display: block;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  padding: 12px;
  border-top: 1px solid #fff;
  box-shadow: 0px0px10pxrgba(0, 0, 0, .3);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="footer-fix"><p>This is its contents......</p></div>

Solution 2:

I'm not sure why you have .stop()

Also try changing if, else if to if, else and fix that syntax error:

$(document).ready(function() {
    var footer = $('.footer-fix');
    $(window).scroll(function() {
       if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100) && footer.is(':visible')){
            footer.fadeOut(300);
        }
        else {
            footer.fadeIn(300);
        }
    });
});

Share