Question

我的航路点没有触发，并且我已经尝试了两个多小时才能解决！

滚动到第id="damn"段时，它应该触发console.log。

有人可以帮忙吗？代码在下面...谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animations</title>
</head>
<link rel="stylesheet" type="text/css" href="animate.css">

<style>
    *{
        margin: 0;
        box-sizing: border-box;
        padding: 0;
    }
    html{
        font-size: 10px;
    }
    #hero-area{
        height: 110vh;
        background: #d0d0d0;
    }
    #hero-area h1{
        padding: 10% 2%;
        margin-top: 10%;
        font-size: 3rem;
        border: 3px solid #000;
        display: inline-block;
    }
    #advice-1{
        height: 80vh;
        background: #dcffe1;
    }
    #damn{
        padding: 5% 0;
        font-size: 3rem;
        border: 3px solid #ff0000;
        margin-top: 0%;
        display: inline-block;
    }
    .container{
        text-align: center;
    }
    #btn1{
        display: block;
        margin: 5px auto;
    }
</style>
<body>
   <div id="hero-area">
        <div class="container">
            <h1>Want to become successful?</h1>
            <button id="btn1">Button 1</button>
        </div>
    </div>
    <div id="advice-1">
        <div class="container">
            <p id="damn">First, you need the right mentality</p>
        </div>
    </div>

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

    $(document).ready(function(){

            var $damn = $('#damn');
            $damn.waypoint(function(){
               console.log('waypoint!'); 
            });

    });

</script>
</body>
</html>

Answer 1

自己找到解决方案。

它一直在正常工作，只是我不知道您应该使用浏览器顶部向下滚动到路标区域。

愚蠢的错误：）

航路点未触发

1 个答案: