javascript - 在 jquery 中向下滚动页面时隐藏内容

Question

我有一个固定在页面底部的内容 DIV。

它的 HTML 和 CSS 看起来像这样:

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

我现在的问题是，当页面向下滚动到页面底部或接近底部时，我需要隐藏这个固定栏。

这是我在 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);
        }
    });
});

但这对我不起作用。谁能告诉我这有什么问题。

希望有人能帮帮我。谢谢。

Answer 1

($(window).scrollTop() + $(window).height() > $(document).height 周围缺少 ( , ) () - 100) 在 if 条件下

$(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>