Question

我目前正在创建一个带箭头的网站，暗示用户向下滚动。我已经设法在下面获得了这个代码，它给出了一个非常好的淡入淡出图标，但是我希望图标不透明度从我网站上每个页面的底部开始逐渐消失300px。

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

每个页面都有不同的长度，所以如果有人能指出我正确的方向让这个动画从每个页面的底部应用300px那将是惊人的！

干杯！

编辑 - 我使用我目前使用的代码创建了一个jsfiddle.net： https://jsfiddle.net/euty0oon/

Answer 1

这里的fadeToBottom()包装为一个小小的jQuery插件：

$.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))
}

当用户滚动到每页底部之前时，Div会消除不透明度

1 个答案: