函數scrollIntoView不起作用

Question

我的功能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'); } }); });

有人知道出什么事了嗎？ 非常感謝！

Answer 1

在我看來， 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

您還需要確保在執行JavaScript之前加載jQuery。 最簡單的方法是在頁面的<head>元素中放置以下內容：

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

函數scrollIntoView不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2018-05-25 18:53:46

函數scrollIntoView不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2018-05-25 18:53:46

解決方案1
0 已采納 2018-05-25 18:53:46