除非我转到检查控制台，否则JavaScript不会触发

Question

我的下面的JavaScript代码遇到了一些奇怪的事情。 JavaScript旨在在用户滚动ID之前触发70px的动画，但是由于某种原因，代码触发的唯一时间是当我滚动显示该动画应显示的区域时，然后转到谷歌浏览器。

任何人都知道为什么代码无法正常启动吗？我还没有放置任何调试代码。我正在使用Bootstrap运行JQuery和Waypoint。

$(document).ready(function(){
 
  $('#element-to-animate-left').css('opacity', 0);
 
  $('#element-to-animate-left').waypoint(function() {
      $('#element-to-animate-left').css('opacity', 1);
      $('#element-to-animate-left').addClass('slideInLeft');
  }, { offset: "70" });
 

 
  $('#element-to-animate-right').css('opacity', 0);
 
  $('#element-to-animate-right').waypoint(function() {
      $('#element-to-animate-right').css('opacity', 1);
      $('#element-to-animate-right').addClass('slideInRight');
  }, { offset: "70" });
 
});

.strategic-marketing-header {
    margin-top:12rem;
}
.strategic-marketing-paragraph {
    padding:4rem 2rem 5rem 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

<section class="section-what-is-strategic-marketing">
        <div class="container">
            <div class="row">
                <div class="col-lg-7" id="element-to-animate-left">
                    <h2 class="header-h3 strategic-marketing-header">What Is Strategic Marketing?</h2>
                    <p class="paragraph strategic-marketing-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="col-lg" id="element-to-animate-right">
                    <div class="image-box">
                        <img class="centered-image" src="resources/img/index/strategic-marketing.png" alt="Strategic Marketing Graphs">
                    </div>
                </div>
            </div>    
        </div>
    </section>