Функция scrollIntoView не работает - PullRequest
Новая
       21

Функция scrollIntoView не работает

0 голосов
/ 25 мая 2018

У меня небольшая проблема с моей функцией scrollIntoView.Действительно, это не работает: (

Это мой код:

  • HTML 

    <section class="page_mission">
  <div class="page_mission_text">
    <div class="scroll-animations">
      <div class="animated fadeInLeft">
        <h2>Design <i class="fab fa-css3-alt"></i><i class="fab fa-html5"></i></h2>
        <p>Blablabla<br></p>
      </div><hr style="width: 75%;">
      <div class="animated">
        <h2>Modernité <i class="fas fa-dna"></i></h2>
        <p>Blablabla</p>
      </div><hr style="width: 75%;">
      <div class="animated">
        <h2>Coûts <a href="cost_popup.html" class="ajax-popup-link"><i class="far fa-credit-card"></i></a></h2>
        <p>Blablabla</p>
      </div>
    </div>
  </div>
</section>

  • JS 

    $(document).ready(function() {
   function isScrolledIntoView(elem) {
       var docViewTop = $(window).scrollTop();
       var docViewBottom = docViewTop + $(window).height();

       var elemTop = $(elem).offset().top;
       var elemBottom = elemTop + $(elem).height();

       return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function() {
        $('.scroll-animations .animated').each(function() {
            if (isScrolledIntoView(this) === true) {
                $(this).addClass('fadeInLeft');

            }
    });
});

У кого-нибудь есть идея, что не так? Спасибо большое!

1 Ответ

0 голосов
/ 25 мая 2018

Мне кажется, класс fadeInLeft добавляется на свиток, как и ожидалось.Однако вам понадобится дополнительная закрывающая фигурная скобка и закрывающие скобки, чтобы закрыть обработчик событий, готовый для документа: 

$(document).ready(function() {

  function isScrolledIntoView(elem) {

  var docViewTop = $(window).scrollTop();

  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;

  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }

  $(window).scroll(function() {

    $('.scroll-animations .animated').each(function() {

      if (isScrolledIntoView(this) === true) {

        $(this).addClass('fadeInLeft');

      }

    });
  });

}); // This was missing

JSFiddle

Вам также необходимо убедиться, чтозагрузить jQuery до того, как ваш JavaScript будет выполнен.Самый простой способ - разместить что-то подобное в элементе <head> страницы: 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
...