Question

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

.strategic-marketing-header {
    margin-top:12rem;
}
.strategic-marketing-paragraph {
    padding:4rem 2rem 5rem 0;
}

.header-h3 {
    font-size:3.5rem;
    color:#6f7fd5;
    margin-top:5rem;
    font-weight:bold;
}

.paragraph {
    font-size:1.7rem;
}

.centered-image {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    height:80%;
    width:auto;
}

<section class="section-what-is-strategic-marketing">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 slideInLeft" id="element-to-animate">
                    <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 slideInRight">
                    <div class="image-box">
                        <img class="centered-image" src="resources/img/index/strategic-marketing.png" alt="Strategic Marketing Graphs">
                    </div>
                </div>
            </div>    
        </div>
    </section>
    
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

`我曾尝试在我的网站上使用此.addClass功能，使其全天候正常运行。有什么想法吗？

更新：

非常感谢大家，是的，由于.css文件没有连接。现在，还有一个问题。我试图让此代码在滚动到元素之前触发约50px。由于某些原因，上面的代码将不会触发。补偿不起作用的任何原因是什么？再次感谢你的帮助！我是新来的！

AddClass JQuery / Waypoint问题

0 个答案: