Question

我目前正在学习JavaScript和jQuery，并希望开始使用ScrollMagic插件。

不幸的是，我遇到了第一道障碍 - 我已经花了好几个小时在网上完成各种教程，但是我无法让这个插件工作！？

你能告诉我这里做错了什么吗？

非常感谢提前！

＆＃13;

$(document).ready(function() {

  // Init ScrollMagic
  var controller = new ScrollMagic.Controller();

  // Scene 1 - pin the second section
  var pinScene01 = new ScrollMagic.Scene({
      triggerElement: '#nav',
      triggerHook: 0,
      duration: '100%'
    })
    .setPin('#nav .nav1')
    .addTo(controller);

});

＆＃13;

.nav1 {
  height: 20vh;
  background-color: #090;
  position: relative;
  overflow: hidden;
}
.div1 {
  height: 80vh;
  background-color: #F33;
  position: relative;
  overflow: hidden;
}
.div2 {
  height: 100vh;
  background-color: #FCC;
  position: relative;
  overflow: hidden;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>

</head>

<body>

  <div class="div1">Div one content!</div>

  <div class="nav1" id="#nav">Nav bar div</div>

  <div class="div2">And more content...</div>

  <div class="div1">And a repeat!</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>




</body>

</html>

＆＃13;

Answer 1

我没有在HTML文件中看到任何对JavaScript代码的引用。

在所有其他JS文件下包含指向它的链接，它应该可以正常工作。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>

</head>

<body>

<div class="div1">Div one content!</div>

<div class="nav1" id="nav">Nav bar div</div>

<div class="div2">And more content...</div>

<div class="div1">And a repeat!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<style>
body{margin: 0; padding: 0;}    
.nav1 {height: 40px;background-color: #090;position: relative;float: left; width: 100%;}
.div1 {height:1000px;background-color: #F33;position: relative;float: left; width: 100%;}
.div2 {height: 1000px;background-color: #FCC;position: relative;float: left; width: 100%;}
</style>    
    <script>
        $(document).ready(function(){
            var controller = new ScrollMagic.Controller();
            var pinScene01 = new ScrollMagic.Scene({
                  triggerElement: '#nav',
                  triggerHook: 0
                })
                .setPin('#nav', {pushFollowers: false})
                .addIndicators({
                    color: '#f00',
                    name: 'nav'
                })      
                .addTo(controller);

            });
    </script>
</body>
</html>

设置ScrollMagic插件

2 个答案: