Question

我在向下滚动1500px后尝试显示div，并且我想在滚动页面的90％时隐藏div（因此，几乎在页面的末尾）。

我的代码可以在1500px之后显示，但我不知道如何在页面结束时隐藏它。

这是我的代码：

<style type="text/css">
  #sample {
    background: #fff none repeat scroll 0 0;    
    position: fixed;
    bottom: 0;
    height: auto;
    max-height:100px;
    width: 100%;
    z-index: 999;
    display:none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).scroll(function() {
      var y = $(this).scrollTop();
      if (y > 1500) {
        $('#sample').fadeIn();
      } else {
        $('#sample').fadeOut();
      }
    });
</script>
<div id="sample">
    just some content...
</div>

如果有人可以帮我解决问题，我会很高兴。非常感谢。

Answer 1

你可以这样做：

var y = $(this).scrollTop();

if (y > 1500 && y < ($(document).height() * 0.9)) {
  $('#sample').fadeIn();
} else {
  $('#sample').fadeOut();
}

Answer 2

您可以使用$(window).height()和$(document).height()来计算＆＃34; 90％＆＃34; -scroll。参见示例：

＆＃13;

$(function() {
  $(document).scroll(function() {
    var y = $(this).scrollTop();

    if ((y + $(window).height()) > ($(document).height() * 0.9)) {
      $('#sample').fadeOut();
      return;
    }

    if (y > 1500) {
      $('#sample').fadeIn();
    } else {
      $('#sample').fadeOut();
    }
  });
})

＆＃13;

.content {
  height: 3000px;
}

#sample {
  background: #ff0000;
  position: fixed;
  bottom: 0;
  height: auto;
  max-height: 100px;
  width: 100%;
  z-index: 999;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
  Content
</div>
<div id="sample">
  sample
</div>

＆＃13;

滚动后显示div并在页面末尾隐藏div

2 个答案: