Fullpage.js init event between steps

Question

I have a page with fullpage.js function, and I want to manipulate a page element between steps, for example. > while scrolling between steps.

Here is the basic structure of the plugin, plus my element that I want to interact with when changing the scene. Right now I have achieved what I want, but it disappears when the page reaches the fourth stage, but I need it to disappear 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 collected a sample script here .

How can I achieve what I am trying to achieve?

---

Bonus tip:

You can find the reverse logic described by me in the second paragraph here.

Answer 1

- onLeave? 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');        
        }
    }