Javascript 当我到达页面底部时，让图像淡出，否则重新出现

我现在有一个div，里面有一个图像，当用户向下滚动300px时，该图像会淡入，当他们向后滚动到顶部时，该div会淡入淡出。这个div本质上是一个背对背的锚

我想补充的是，当用户距离页面底部650px时，让图像淡入，然后当用户距离页面底部650px时淡入

JavaScript

$(function(){
$(".top").hide();

$(window).scroll(function(){
if($(this).scrollTop()>300){
  $(".top").fadeIn(500)
}else{
  $(".top").fadeOut(100)
}
})
});

HTML

再一次，我需要添加到我当前的JS。

---

谢谢

一种方法是记录文档高度减去窗口高度的大小，因为当您滚动时，它会从滚动窗口的顶部计算scrollTop

首先计算从底部到顶部的距离应减去额外的距离650

var fromBot = $(document).height()-650-$(window).height();

这样修改您的事件

 $(window).scroll(function(){
        if($(document).scrollTop() > 300 && $(document).scrollTop() < fromBot) {
          $(".top").fadeIn(500);
        }else {
          $(".top").fadeOut(100);
        }
    });

---

示例

有什么问题吗？非常有效！谢谢！

 $(window).scroll(function(){
        if($(document).scrollTop() > 300 && $(document).scrollTop() < fromBot) {
          $(".top").fadeIn(500);
        }else {
          $(".top").fadeOut(100);
        }
    });