Question

我目前有一个内部带有图像的div，当用户向下滚动300px时淡入，当它们向后滚动到顶部时，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。谢谢！

Answer 1

执行此操作的一种方法是记录文档高度减去窗口高度的大小（当您滚动时，从滚动窗口顶部计算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);
        }
    });

示例fiddle

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

1 个答案: