淡出页面末尾的元素

Question

嘿，当它到达页面末尾时，我很难尝试淡出元素...我知道很热，可以在页面顶部淡出它，但我可以弄明白，这个是我到目前为止的那个

 $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(500);
            $('.scroll2').fadeIn(500);
        } else { 
            $('#scroll').fadeOut(500); 
            $('.scroll2').fadeOut(500); 
        }    
    });

我刚试过这个但仍然无法正常工作

$(window).scroll(function(){
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
           $('.scroll2').fadeOut(500);
        }
    });

Answer 1

您可以通过比较当前位置$(window).scrollTop()与窗口$(window).height()的高度之和来查看是否已到达文档的底部，看它是否等于整体整个页面的高度$(document).height()：

// If you have scrolled to the bottom of the document...
if($(window).scrollTop() + $(window).height() == $(document).height()) {
    // Fade out stuff here
}

示例

＆＃13;

＆＃13;

$(function() {
  $(window).scroll(function() {
    // If you have scrolled to the bottom of the document...
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      $("#example").fadeOut();
    }
  });
});

＆＃13;

body {
  height: 1500px;
}
#example {
  position: fixed;
  padding: 15px;
  background: #0071bc;
  color: #FFF;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<div id='example'>
  This should fade out at the bottom
</div>

＆＃13;

＆＃13;

＆＃13;