javascript - 当用户滚动到每个页面底部之前时，Div 会淡出不透明度

Question

我目前正在制作一个带有箭头的网站，暗示用户向下滚动。我已经设法得到下面的代码，它提供了非常好的淡入和淡出图标，但我希望图标不透明度从我网站上每个页面底部大约 300px 处开始淡出。

$(window).scroll(function(){
   $(".down-arrow").css("opacity", 1 - $(window).scrollTop() / 300);
});

每个页面的长度都不同，所以如果有人能指出我正确的方向，让这个动画从每个页面的底部应用 300 像素，那就太棒了!

干杯!

编辑 - 我已经使用我当前使用的代码创建了 jsfiddle.net: https://jsfiddle.net/euty0oon/

Answer 1

这是封装为一个小型 jQuery 插件的 fadeToBottom():

$.fn.fadeToBottom = function(d) {
  var w=$(window), 
      f=()=>{$(this).css({opacity:Math.min($('body')[0].scrollHeight-w.scrollTop()-w.height(),d)/d})};
  if(d)w.on('load scroll resize',f)
}

用作

$('.down-arrow').fadeToBottom(300);

您的更新fiddle .

<小时/>

如果您关心页面性能，请使用以下版本(尤其是当您在同一页面上的多个元素上使用它时!)，确保加载 Ben Alman 的 debounce/throttle首先(取决于它):

$.fn.fadeToBottom = function(d) {
  var w=$(window), 
      f=()=>{$(this).css({opacity:Math.min($('body')[0].scrollHeight-w.scrollTop()-w.height(),d)/d})};
  $(this).css({transition:'opacity 42ms'});
  if(d)w.on('load scroll resize',$.throttle(42,f))
}