添加和移除固定的waypoint类元素在下降时起作用，但在上升时不起作用

waypoint addClass and remove class of a "fixed" element works when going down but doesn't going up

本文关键字：起作用 不起作用 元素 waypoint 添加      更新时间：2023-09-26

我正在制作一个使用恒星视差效果的网站: 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/

谢谢

创建了我的投资组合网站(http://anti-code.com)，它做了一些疯狂的东西，以及在各个方向上视差滚动，你的代码结构的方式可以做得更加面向对象，这将使事情更少重复。

但除此之外。您遇到的问题是因为您没有删除类。你只是简单地切换每个幻灯片的那些。

例如，所有你有这个的例子:

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

可以更改为这样的内容以使其正常工作:

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

如果有意义的话。否则，您不会更改类，您只是在square元素上切换不同的trans#类名。如果你只是在切换它之前先删除class属性，然后添加你想要打开的className，那么它将工作

相关文章：