Question

我已将所有代码上传到gitHub以帮助回答此问题，以便您可以查看整个代码，存储库 - https://github.com/Matthammond96/Fail-Net

我正在尝试使背景（id = par1，par2，par3“）滚动得比具有名为section的类的内容更快。但是我使用的jQuery并没有减慢速度（在底部找到） index.html）。我是jQuery的新手，所以无法解决问题，任何帮助都会有用，谢谢！

html看起来像这样;

<div id="wrapper" class="wrapper-scroll">
         <div id="par1"></div>
         <div id="par2"></div>
         <div id="par3"></div>
            <div class="content">

                <div class="section">

                    <div class="article1"> <!-- Epsiode 1 -->
                    </div>    
                </div>
                <div class="section">
                    <div class="article2"> <!-- Epsiode 2 -->


                    </div>
                </div>
                <div class="section">
                    <div class="article3"> <!-- Epsiode 3 --> 

                            </div>
                        </div> 


                    </div>
                </div>

随之而来的是css;

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.wrapper-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.content {
    width: 3862px;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: -ms-max-content;
    width: max-content;
}
h1 {
    font-family: 'Segoe UI Light', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2em;
    margin: .3em 0;
}
.section {
    float: left;
    overflow: hidden;
    width: 750px;
    margin: 0 1.2em 0 0;
} 

#par1 {
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    width: 1400px;
    height: 100%;
    background-color: #db3ea5;
    display: inline-block;   
    z-index: -10;
}

#par2 {
    position:fixed;
    top:0px;
    bottom:0px;
    left:1400px;
    right:0px;
    width: 1400px;
    height: 100%;
    background-color: #4b3edb;
    display: inline-block;  
    z-index: -10;
}

#par3 {
    position:fixed;
    top:0px;
    bottom:0px;
    left:2800px;
    right:0px;
    width: 1400px;
    height: 100%;
    background-color: #f5dc1a;
    display: inline-block;  
    z-index: -10;
}

.article1 {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    width: 1400px;
    height: 100%;
    display: inline-block;
}

.article2 {
    position:absolute;
    top:0px;
    bottom:0px;
    left:1400px;
    right:0px;
    width: 1400px;
    height: 100%;
}

.article3 {
    position:absolute;
    top:0px;
    bottom:0px;
    left:2800px;
    right:0px;
    width: 1400px;
    height: 100%;
}

然后我用来改变速度的jQuery是

<script>
  function parralax() {
     var par2 = document.getElementById('par2');
     var par3 = document.getElementById('par3');
     par2.style.left = -(window.pageYOffset / 10)+'px';
     par3.style.left = -(window.pageYOffset / 10)+'px';
   }
   window.addEventListener("scroll", parralax, false);
   </script>

   <script>
     function parralax2() {
      var article2 = document.getElementById('article2');
      var article3 = document.getElementById('article3');
      article2.style.left = -(window.pageYOffset / 1)+'px';
      article3.style.left = -(window.pageYOffset / 1)+'px';
     }
     window.addEventListener("scroll", parralax2, false);
   </script>

有问题使两个元素以不同的速度滚动

0 个答案: