当进度条在后台通过时更改svg的填充 [英] Change the fill of an svg as a progress bar passes in the background

问题描述

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

I have a progress bar that drops in when the user scrolls down more than 100 pixels. The background of the progress bar fills with red. The progress bar container also contains an svg of a tree which is white.

当进度条在其后经过时，如何更改svg的填充颜色.因此，如果进度条位于树的后半部分，则左半部分将为白色，而右半部分仍将为红色.那有可能吗?我目前正在使用jQuery.

How can I change the fill color of the svg as the progress bar passes behind it. So, if the progress bar is halfway through the back of the tree, the left half would be white and the right half would still be red. Is that even possible? I am using jQuery currently.

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

I mocked up a quick pen here: http://codepen.io/redbranchmedia/pen/aGfme

这是我用于进度条的脚本:

Here is the script I am using for the progress bar:

  // 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

推荐答案

您快到了.在白色树后面使用红色树是一个动画技巧.因此，当未遮盖白树时，就会出现红树.

You're almost there. It is an animation trick to use a red tree behind a white tree. So when the white tree is unmasked, the red tree appears.

早期版本回答了SO问题，但是在各种情况下像素精度都不是100％窗口宽度和窗口缩放(可能可以通过更多的数学方法进行修复).因此，下面的新更新.

Earlier revision answers the SO question, however it isn't 100% pixel accurate with various window width and window zoom (May be possible to fix it with more math). Hence this new update below.

更新:新的 codepen 示例，使用渐变来逐渐将其旋转白色的.如果要稍后将其变为白色，请调整(max*0.1)中的值0.1

Update: New codepen example using gradient to gradually turn it white. Adjust the value 0.1 in (max*0.1) if you want it to turn white later

这篇关于当进度条在后台通过时更改svg的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！