根据容器的位置在滚动上绘制 svg答案

【问题标题】：Draw svg on scroll depending on the position of the container根据容器的位置在滚动上绘制 svg
【发布时间】：2018-01-26 01:02:35
【问题描述】：

我正在使用 jQuery 和插件 drawsvg 在滚动上显示一个 svg，就像在这个官方演示中一样： https://codepen.io/lcdsantos/pen/zvGQYB

我想在页面的不同部分获得相同的效果：

页面包含一些部分（未定义高度）
当滚动第 1 部分时 => 显示 svg 1
当滚动第 2 部分时 => 显示 svg 2

官方demo上的代码是：

var $doc = $(document),
    $win = $(window),
    $svg = $('svg').drawsvg(),
    max = $doc.height() - $win.height();
$win.on('scroll', function() {
  var p = $win.scrollTop() / max;
  $svg.drawsvg('progress', p);
});

我试过了：

var max = $doc.height() - $win.height() - $('.section').height()  ;

这是我的密码笔：https://codepen.io/PiccolinaEma/pen/wqpXea?editors=1111

但这不是好方法。

我也看过航点插件，但我不明白如何组合它们。 http://imakewebthings.com/waypoints/

我怎样才能做到这一点？

【问题讨论】：

嗨 Piccolina，你解决了这个问题吗（我也一样）？在我看来，航点不是正确的想法。您进行数学计算的想法是正确的方法。但这取决于插件如何处理“进度”变量，我猜。

标签： javascript jquery html css svg

【解决方案1】：

尝试使用“clientHeight()”（JavaScript 导航方法）。

【讨论】：

问题不是真正的高度，而是如何在不同部分的滚动上实现drawsvg.js（而不是像演示显示的窗口）。要获得部分的高度，我可以使用 $('.my-element').height().