在浏览器中刷新后，JavaScript无法正常加载吗？在Chrome开发工具中可以使用

Question

希望你们可以帮助我。我正在尝试使此图像在向下滚动时逐渐消失。它在我第一次加载文件时起作用，但之后没有任何作用。希望有人能回答为什么会发生这种情况。

我的Javascript也没有在Safari上显示，但我在Chrome Dev Tools的控制台中看不到任何错误。每当我在Atom中预览时，它也可以工作。希望这种解释是有道理的。

<!-- html -->

  <div class="platforms-right">
    <div class="ad-photo">
      <img class=" hidden" src="img/iphone-ad.png" />
    </div>
  </div>

/* css */

  @keyframes fade-in {
    from {opacity: 0; transform: scale(0.7,0.7)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 3s;
}

.hidden {
  opacity: 0;
}

//javascript

(function() {
  var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();
})();