CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3733831
user3733831

Reputation: 2926

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:

<div class="footer-fix">
    <p>This is its contents......</p>
</div>

.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: 0px 0px 10px rgba(0,0,0,.3);
}

My question is now I need to hide this fixed bar when page is scrolling down to the bottom or near the bottom of the page.

This is how I tried it in jquery: 

$(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);
        }
        else if($(window).scrollTop() < $(document).height() - 100 && footer.is(':hidden')){
            footer.stop().fadeIn(300);
        }
    });
});

But this is not working for me. Can anybody tell what is the wrong with this.

Hope somebody may help me out. Thank you.

Upvotes: 1

Views: 1566

Answers (2)

deleted
deleted

Reputation: 782

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);
        }
    });
});

Upvotes: 0

guest271314
guest271314

Reputation: 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);
    } else if (($(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: 0px 0px 10px rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="footer-fix">
  <p>This is its contents......</p>
</div>

Upvotes: 1

Related Questions