Javascript не будет загружаться после обновления в браузере?Работает ли в Chrome Dev Tools - PullRequest
Новая
       8

Javascript не будет загружаться после обновления в браузере?Работает ли в Chrome Dev Tools

0 голосов
/ 25 сентября 2019

Надеюсь, вы, ребята, можете мне помочь.Я пытаюсь заставить изображение исчезать при прокрутке вниз.Это работает при первой загрузке файла, но ничего после.Я надеялся, что у кого-то есть ответ на вопрос, почему это может происходить.

Мой 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();
})();
...