Sqnkov Sqnkov - 2 months ago 8
CSS Question

fullpage.js init event between stages

I have a page with fullpage.js functionality and I want to manipulate a page element between the stages , e.g. > during the scroll between stages.

Here is the base structure of the plugin, plus my element that I want to interact with on stage change. Right now I have achieved what I want, but it dissapears when the page reaches the fourth stage section, but I need it to dissapear before the plugin reaches the fourth section when scrolling down in the third.

<div id="element">
<p>The Element. *</p>
</div>
<div id="fullpage">
<div class="section">SECTION ONE *</div>
<div class="section">SECTION TWO **</div>
<div class="section">SECTION THREE ***</div>
<div class="section homeFour">SECTION FOUR ****</div>
</div>


I have put together a sample Fiddle here.

How can I achieve what I am trying to achieve?

Answer

do you need something like, onLeave event? https://jsfiddle.net/x7bdwynx/1/

  onLeave: function(index, nextIndex, direction) {
        if(index==3&&nextIndex==4&&direction=="down")
        {        
            $('#element').addClass('hideCont');        
        }
        if(index==4&&nextIndex==3&&direction=="up")
        {        
          $('#element').removeClass('hideCont');        
        }
    }
Comments