滚动后显示div并在页面末尾隐藏div [英] Show div after scroll and hide div at the end of the page

问题描述

我在向下滚动1500px后尝试显示一个div，我想在滚动页面的90％时隐藏div（所以，几乎在页面的末尾）。

I try to show a div after scrolling down 1500px and i want to hide the div when 90% of the page is scrolled (so, nearly at the end of the page).

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

My Code works fine to show it up after 1500px but i don't know how to hide it when the end of the page is reached.

这个是我的代码：

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

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

I would be very glad if someone can help me with the problem. Many Thanks.

推荐答案

你可以这样做：

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

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

这篇关于滚动后显示div并在页面末尾隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！