waypoint addClass и remove class фиксированного элемента работает при спуске, но не поднимается

Я работаю над веб-сайтом с эффектом параллакса с использованием 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/

Благодарность


javascript parallax jquery-waypoints
person user2137972    schedule 13.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Создав сайт моего портфолио (http://anti-code.com), который делает некоторые сумасшедшие вещи вместе с прокруткой параллакса Во всех направлениях, способ структурирования вашего кода мог бы быть гораздо более объектно-ориентированным, и это сделало бы вещи намного менее повторяющимися.

Но помимо всего этого. Проблема, с которой вы столкнулись, заключается в том, что вы не удаляете классы. Вы просто переключаете те, которые есть для каждого слайда.

Так, например, все экземпляры, где у вас есть это:

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

Для правильной работы можно изменить что-то вроде этого:

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

Если в этом есть смысл. В противном случае вы не меняете класс, вы просто включаете другое имя класса trans # на квадратном элементе. Если вы просто удалите атрибут класса перед его переключением, а затем добавите className, которое вы хотите включить, он будет работать.

person jaredwilli    schedule 13.03.2013