Fullpage.js: Windows scroll event not working in fullpage.js

[vanloc0301]

Description

I've created a single page with each page is a full page.

My problem is: I want to change the CSS when the scroll event is active.

At Second Slide and Four Slide I want to change the position of 'nav.nav-next' from 35% to 65% to straight in the line.

When I scroll the page it doesn't do anything.

Will be my JS code apply with Four Slide?

Currently, my JS code like this:

var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
    alert($(this).scrollTop()); 
  $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});

I've to ask the question before, should create the height of body or a div.
But it not working with me because I using fullpage.js

Link to isolated reproduction with no external CSS / JS

http://codepen.io/r0ysy0301/pen/RoyJOd

Versions

Browser: Chrome 55 stable
OS: Windows 10.
Fullpage.js: latest version.

[alvarotrigo]

Read the Frequently Answered Questions

[azatyan]

jQuery('html').bind('mousewheel DOMMouseScroll', function (e) {
var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail);
`

[quitequinn]

$('html').bind('mousewheel DOMMouseScroll', function (e) {
    console.log('bingo');
});

[trianhhuynh]

You can use the event Callback onLeave(direction) of FullPageJs:

...
onLeave: function(origin, destination, direction){
        var leavingSection = this;  
        if(origin.index == 1 && direction =="down"){
            alert("Going to section 3!");
        }
        else if(origin.index == 1 && direction == "up"){
            alert("Going to section 1!");
        }
    }
...

CallBack

[Lyudvigg]

$('html').bind('mousewheel DOMMouseScroll', function (e) {
    console.log('bingo');
});

Thanks))