在特定滚动级别启动 jquery 功能

Question

我试用了一个 jquery 花式饼图插件 http://codepen.io/githiro/pen/ICfFE

我在这个网站上实现了它：http://digi.hkettelhut.de/ 但现在我不希望它在页面加载时设置动画，而是在看到#general 部分时设置动画。我不喜欢 jquery，这就是为什么我不知道如何自己处理这个问题。

我已经尝试实现 if 子句：

 $(function(){
if ($("body").scrollTop() > (window.innerHeight - 5)) {
  $("#gender").drawDoughnutChart([
    { title: "männlich", value: 120,  color: "#0478c6" },
    { title: "weiblich", value:  80,  color: "#FF00FF" },
  ]);

  $("#age").drawDoughnutChart([
    { title: "19", value:  20,  color: "#0478c6" },
    { title: "20", value:  80,  color: "#FF00FF" },
    { title: "21", value:  35,  color: "#0c4883" },
    { title: "22", value:  65,  color: "#7e0a7e" },
  ]);

  $("#country").drawDoughnutChart([
    { title: "Deutschland", value: 165,  color: "#0478c6" },
    { title: "England", value:  20,  color: "#FF00FF" },
    { title: "Frankreich", value:  15,  color: "#0c4883" },
  ]);
 }
});

Answer 1

将您的代码放在滚动事件处理程序中，然后检查正文的 scrollTop 是否大于您要查找的元素的偏移量。

$(function () {
  $(window).on('scroll', function (e) {
    if ($('body').scrollTop() > $(/*element you are looking for*/).offset().top) {
      // Draw pie chart
    }
  });
});

在特定滚动级别启动 jquery 功能

start jquery function on a specific scroll level

jquery

scrolltop