我的 .js 文件不会 link 到我的 HTML，无法让 scrollmagic 工作

Question

我正在尝试在我的网页上使用 ScrollMagic。我在 .js 文件中输入了代码，并将此文件和 ScrollMagic cdn link 编辑到我的 html，但这对我的页面没有影响。

我尝试将 ../ 添加到文件 link 并添加不同的脚本

这是HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Sarabun" 
rel="stylesheet">
<link rel="stylesheet" href="css/styles2.css">
<title>Example</title>
</head>

<body>
<header>
<h1>Header section</h1>
</header>
<section class="about">
<div class="about-title">
  <h2>About Us</h2>
</div>
<div class="about-pages">
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet, </p>
  </div>
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet, </p>
  </div>
  <div>
    <h2>Project 1</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  </div>
  </section>


<footer>
<h2> This is the footer </h2>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="app.js"></script>

</body>

这是 app.js 代码：

function splitScroll(){
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title'
triggerHook: 0; 
})

.setPin('.about-title');
.addIndicators();
.addTo(controller);
 }

splitScroll();

我希望我的页面左侧保持静止，而右侧滚动，但它是同时滚动的。

Answer 1

我发现您的 JS 代码中存在一些错误。对象属性应该有一个尾随逗号。你少了一个。你也不应该在最后一个分号之后有一个分号。

new ScrollMagic.Scene({
duration: '200%',
triggerElement: '.about-title',
triggerHook: 0 
})

另一个问题是您有不必要的分号导致链接问题...

.setPin('.about-title')
.addIndicators()
.addTo(controller); // This one may need to be removed also

最后，我看到触发器附加到 class (.about-title)。我在你的 html.

中没有看到 class

我的 .js 文件不会 link 到我的 HTML，无法让 scrollmagic 工作

My .js file won't link to my HTML, unable to get scrollmagic to work

html

javascript

css

jquery

scrollmagic