Question

当用户向下滚动超过100个像素时，我有一个进度条。进度条的背景填充红色。进度条容器还包含一个白色的树的svg。

当进度条在其后面传递时，如何更改svg的填充颜色。因此，如果进度条位于树的后面一半，则左半部分为白色，右半部分仍为红色。这甚至可能吗？我目前正在使用jQuery。

我在这里嘲笑了一支快笔：http://codepen.io/redbranchmedia/pen/aGfme

以下是我用于进度条的脚本：

  // fills progress bar on scrolldown 

jQuery(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  jQuery(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});
// end progress bar

Answer 1

你快到了。这是一个使用白树后面的红树的动画技巧。因此，当白树被取消屏蔽时，会出现红色树。

Earlier revision回答了SO问题，但不是100％像素精确，各种窗口宽度和窗口缩放（可能可以通过更多的数学运算来修复它）。因此，下面是这个新的更新。

更新：使用渐变逐渐将其变为白色的新codepen示例。如果您希望稍后变为白色，请调整0.1中的值(max*0.1)

当进度条在后台传递时，更改svg的填充

1 个答案: