javascript - fullpage.js trigger event on scroll down? - Stack Overflow

admin管理员组

文章数量:1384595

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.

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.

• javascript
• jquery
• fullpage.js

Share Improve this question Follow asked Feb 19, 2017 at 21:13 KiukiKiuki 64444 gold badges77 silver badges1616 bronze badges 2

• Use the callbacks or fullPage.js state classes as @s3rila remends. Check a callbacks demo here and a video tutorial regarding the state classes here. – Alvaro Commented Feb 20, 2017 at 10:22
• but @Alvaro there is no startscroll callback. OnLeave is not the same. – Laurence Cope Commented Apr 28, 2018 at 11:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptfullpagejs trigger event on scroll downStack Overflow