Waypoint JQuery 甚至基本 jquery 代码都不起作用

Question

我刚开始编程，这是我第一次使用 JQuery。我正在做一个 HTML/CSS 项目，我想使用 Waypoint jquery 添加一些效果。问题是它不起作用。即使是基本测试（更改元素的背景颜色 'sec1-text'）也不起作用。

你能帮我找出问题所在吗？在下面，您会找到 HTML 和 JS 文件。

HTML---------------------------------------- ------------------

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inicial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Thais Fachini</title>
    <link href="./css/normalize.css" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./css/grid.css" rel="stylesheet">
    <link href="./css/responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

</head>
    <body class="app">

<!---------------SECTION 1 ---------------------------> 

        <div class="sec1">
            <div class="header">
                <div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
                <!--Sticky Navigation--><div class="logo-img-sticky"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img-sticky"></div>
                <div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
                <!--Sticky Navigation--><div class="logo-name-sticky"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
                <div class="links">
                    <nav>
                        <a href="#" class="header-link">Sobre</a>
                        <a href="#" class="header-link">Como funciona</a>
                        <a href="#" class="header-link">Assinar</a>
                        <a href="#" class="header-link">Cliente</a>
                    </nav>
                </div>
            </div>
            <div class="sec1-text">
                <div class="text">
                    <p class="sec1-text-title">ALIMENTAÇÃO FUNCIONAL</p>
                    <p class="sec1-textindent1">para o <span class="strong">equilíbrio</span> do corpo</p>
                    <p class="sec1-textindent2">e o <span class="strong">prazer</span> de comer bem.</p>
                </div>
                <div class="buttons">
                    <nav>
                        <a href="#" class="btn btn-full">Assinar</a>
                        <a href="#" class="btn btn-ghost">Cliente</a>
                    </nav>
                </div>
            </div>
        </div>

<!--------------- ABOUT ---------------------------> 

        <div class="about js--about">
            <div class="about-title">
                <h2><span class="about-title1">Orientação Nutricional Online</span>
                    <span class="about-title2">Atendimento Online</span></h2>
            </div>
            <div class="about-photo-text">
                <img src="img/photo_thais.png" alt="Photo Thais Fachini" class="about-photo">
                <p>Olá!</p>
                <p>Sou Thaís Fachini, nutricionista formada pela Universidade São Camilo, SP e extensões em <span class="strong">Nutrição Funcional</span> e <span class="strong">Nutrição Holística</span>.</p>
                <p>Minha filosofia de atendimento lhe ensina a olhar e escutar mais seu corpo e perceber o que funciona para você.</p>
                <p>Existem vários fatores em nossa vida que interferem na saúde, nos relacionamentos pessoais, trabalho, espiritualidade e aceitação pessoal. Conduzirei seu processo, indicando ferramentas para sentir-se mais feliz e mais saudável.</p>
            </div>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/script.js"></script>

    </body>
</html>

JS文件---------------------------------------- ----------------------

    /*eslint-env jquery*/

(document).ready(function ( ) {

    $('sec1-text').click(function(){
        $(this).css('background-color', '#ff0000');
    });



    /* For the sticky navigation */
    $('.js--about').waypoint(function(direction) {
        if (direction == "down") {
            $('header').addClass('sticky');
        } else {
            $('header').removeClass('sticky');
        }
    }, {
      offset: '60px;'
    });



});

Answer 1

您需要 reference/load jQuery 模块，您目前只加载 waypoints jQuery module/resource：

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

Waypoint JQuery 甚至基本 jquery 代码都不起作用

Waypoint JQuery or even basic jquery code doen´t work

javascript

css

jquery

waypoint