0

我正在使用 Stellar 开发具有视差效果的网站： http ://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

我有一个“固定”的 div，页面中心有一个类。当我向下或向上滚动时，类会根据“活动”的幻灯片而改变。

我正在使用航点，当我向下滚动页面时一切正常。但是当我向上滚动时，而不是更改班级，它们都一个接一个地放置，顺序发生了变化，班级与右侧的幻灯片不匹配。

这是 HTML（#square 是固定的 div）：

<body>

<ul class="navigation">
<li id="un"     data-slide="1">Slide 1</li>
<li id="deux"   data-slide="2">Slide 2</li>
<li id="trois"  data-slide="3">Slide 3</li>
<li id="quatre" data-slide="4">Slide 4</li>
<li id="cinq"   data-slide="5">Slide 5</li>
<li id="six"    data-slide="6">Slide 6</li>
<li id="sept"   data-slide="7">Slide 7</li>
<li id="huit"   data-slide="8">Slide 8</li>
<li id="neuf"   data-slide="9">Slide 9</li>
<li id="dix"    data-slide="10">Slide 10</li>
<li id="onze"   data-slide="11">Slide 11</li>
</ul>

<div id="square" class="trans1"></div>

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<a class="button" data-slide="2" title=""></a>

</div><!--End Slide 1-->

<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">

   <div class="wrapper">
      <img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
      <img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
   </div>

   <span class="slideno">Slide 2</span>
   <a class="button" data-slide="3" title=""></a>

</div><!--End Slide 2-->


<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
   <div class="wrapper">
   <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
   <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
   <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
   <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
   </div>

   <span class="slideno">Slide 3</span>
   <a class="button" data-slide="4" title=""></a>

</div><!--End Slide 3-->

<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">

   <span class="slideno">Slide 4</span>
   <span class="parallaxbg">Use the parallax effects on background images too!</span>

</div><!--End Slide 4-->

这是javascript

//1st SLIDE
    $('#square').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans1');
    }
    else {
        $('#square').toggleClass('trans1');
    }
    });

    // 2nd slide
    $('#slide2').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
    }
    else {
        $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
    }
    }, { offset: '50%' });

        $('#slide2').waypoint(function(direction) {
            if (direction === 'up') {
            $('#square').toggleClass('trans1'),$('#square').removeClass('trans2');
        }
        });

   //3rd slide
   $('#slide3').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
    }
    else {
        $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
    }}, { offset: '50%' });

        $('#slide3').waypoint(function(direction) {
                if (direction === 'up') {
            $('#square').toggleClass('trans2'),$('#square').removeClass('trans3');
            }
        });

    //4th slide
    $('#slide4').waypoint(function(direction) {
        if (direction === 'down') {
        $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
    }
    else {
        $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
    }}, { offset: '50%' });

        $('#slide4').waypoint(function(direction) {
                if (direction === 'up') {
            $('#square').toggleClass('trans3'),$('#square').removeClass('trans4');
            }
        });

这是网站的链接：http: //ambuscade.ca/DEV2/

谢谢

4

1 回答 1

0

创建了我的投资组合网站（http://anti-code.com），它做了一些疯狂的事情以及在各个方向上的视差滚动，你的代码结构方式可以做得更加面向对象，它会让事情变得很多较少重复。

但除此之外。您遇到的问题是因为您没有删除课程。您只需切换适用于每张幻灯片的那些。

例如，所有你有这个的实例：

   $('#square').toggleClass('trans2'),$('#square').removeClass('trans3');

可以改成这样才能正常工作：

  $('#square').removeAttr('class').addClass('trans2');

如果这是有道理的。否则您不会更改类，您只是在方形元素上切换不同的 trans# 类名称。如果您只是在切换之前先删除类属性，然后添加要打开的类名，那么它将起作用。

于 2013-03-13T18:04:56.813 回答