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

Have an image fade out when I have reached the bottom of the page, then reappear if otherwise

本文关键字：图像 淡出 否则 新出现 然后 底部      更新时间：2023-09-26

我目前有一个div，里面有一个图像，当用户向下滚动300像素时，这个图像会淡入，当他们滚动到顶部时，这个div会淡入。这个div本质上是一个"Back To Top"锚。

我想要添加的是，当用户距离页面底部650px时，图像会逐渐消失，然后当用户距离大于650px时，图像会逐渐消失。

JavaScript 

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

<div class="top">
  <a href="#top"><img src="img/toTop.png" width="50"></a>
</div>

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

这样做的一种方法是注意文档的高度减去窗口的高度的大小(因为当您滚动时，它会从滚动窗口的顶部计算scrollTop)。

首先计算到底部的距离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);
        }
    });

例子小提琴

相关文章：