0

我的功能有点问题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');

            }
    });
});

有人知道出了什么问题吗？非常感谢！

4

1 回答 1

0

在我看来，该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>
于 2018-05-25T18:53:46.837 回答