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


i'm working on website parallax effect using stellar: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

i've got "fixed" div class @ center of page. when scroll down or class changes depending on slide "active".

i'm using waypoint , works fine when i'm scrolling down page. when scroll up, instead of changing class, put 1 after other, order shifted , class doesn't match right slide.

here html (#square fixed 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 parallax effects on background images too!</span>  </div><!--end slide 4--> 

and here 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');             }         }); 

here's link website : http://ambuscade.ca/dev2/

thanks

having created portfolio site (http://anti-code.com) crazy stuff along parallax scrolling in directions, way have code structured done far more object oriented, , make things less repetitive.

but besides that. issue having because not removing classes. toggling ones each slide.

so example, instances have this:

   $('#square').toggleclass('trans2'),$('#square').removeclass('trans3'); 

could changed work properly:

  $('#square').removeattr('class').addclass('trans2'); 

if makes sense. aren't changing class otherwise, you're toggling on different trans# class name on square element. if remove class attribute first before toggling it, , add classname want turn on work.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -