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
Post a Comment