Question

嗨请有人帮助我，基本上我想在#stats在页面中心周围完全可见时运行Javascript。一旦javascript运行一次，我不希望它再次运行，除非他们重新访问该页面。

提前感谢任何帮助。

我的代码如下。

<div id="stats">
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-4">
            <h2><span id="totalFranchises" class="franchise-number">108</span></h2>

            </div>

            <div class="col-xs-12 col-sm-8">

            </div>


        </div>
    </div>
    </div>

<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>

干杯，

韦斯。

Answer 1

我最近这样做了，我使用了包含countUp的div上方div的高度。如果您想了解更多内容，请阅读here，here和here。这个如果你不想使用jQuery。

我的解决方案在控制器中看起来像这样：

$window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
  var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
  if (bodyScrollTop > height) {
    //start the countUp
  } else {
    //something else
  }
}

当用户从屏幕顶部滚动一定数量的像素时，运行countUp.js

1 个答案: