fullpage.js trigger event on scroll down?

Question

I want to trigger when user scroll Down and change section.

I want to do sometlike this:

$(document).ready(function () {

/* *
/* SCROLL Event
/* */
$(window).scroll(function () {
        document.getElementById("navbar").style.background = "rgba(0, 0, 0, 0.2)";
        $(".logo a").css("color", "#ec008c");
        $(".box-shadow-menu").css("background-color", "#ec008c");
        $(".box-shadow-menu").css("box-shadow", "0 0.37em 0 0 #ec008c, 0 0.73em 0 0 #ec008c");
        console.log("Scroll")
    });
});

How can I do? If I use this code don't works, why?

Thank You, Gian Marco.

Use the [callbacks](https://github.com/alvarotrigo/fullPage.js#callbacks) or [fullPage.js state classes](https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs) as @s3rila recommends. Check a callbacks demo [here](http://codepen.io/alvarotrigo/pen/XbPNQv) and a video tutorial regarding the state classes [here](https://www.youtube.com/watch?v=qiCVPpI9l3M). — Alvaro, Feb 20 '17 at 10:22
but @Alvaro there is no startscroll callback. OnLeave is not the same. — Laurence Cope, Apr 28 '18 at 11:01

LucasP · Answer 1 · 2017-02-19T22:25:02.220

It's in the case of the window having no place to scroll right ?

I think you have to bind the mousewheel event.

   $(window).bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta /120 > 0) {
       console.log('scrolling up');
     }
     else{
       console.log('scrolling down');
     }
   });

But I think you might want to triger fullpage.js methode or Callbacks. You should probably triger your JS changing the color when you leave the first (or other) slide, exemple:

    $('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);

        //after leaving section 1
        if(index == 1 && direction =='down'){
            document.getElementById("navbar").style.background = "rgba(0, 0, 0, 0.2)";
            $(".logo a").css("color", "#ec008c");
            $(".box-shadow-menu").css("background-color", "#ec008c");
            $(".box-shadow-menu").css("box-shadow", "0 0.37em 0 0 #ec008c, 0 0.73em 0 0 #ec008c");       
        }          
    }
});

documentation on onLeave

when using fullpage.js on content sections that have too much content to fit into fullpage sections, and so require scrolldown, you cannot use onLeave to trigger an action you need at a certain scroll position because you have not left the section yet by the time you want to call an event. To give an example, we hide some aspects of a fixed header on scroll down so it does not overlap content. We cannot do this using onLeave. We have to monitor scroll. — Laurence Cope, Apr 28 '18 at 10:45

fullpage.js trigger event on scroll down?

1 Answers1