fullpage.js如何在向下滚动时触发事件？

Question

我希望当用户向下滚动并更改部分时触发。

我想做这样的事情：

$(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")
    });
});

我该怎么做呢？ 如果我使用这段代码，为什么它不起作用呢？

谢谢， Gian Marco。

- Kiuki

---

使用 callbacks 或者 fullPage.js 状态类，正如 @s3rila 建议的那样。在这里查看 callbacks 演示 here，关于状态类的视频教程在这里 here。 - Alvaro

但是，@Alvaro，没有startscroll回调函数。OnLeave不同。 - Laurence Cope

Answer 1

如果窗口没有滚动条，您需要绑定鼠标滚轮事件。

我认为您需要绑定鼠标滚轮事件。

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

但我认为您可能想触发fullpage.js 方法或回调函数。 当您离开第一页（或其他幻灯片）时，应该触发JS更改颜色，例如：

    $('#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

- LucasP

---

当在内容部分使用fullpage.js时，如果内容太多而无法适应fullpage部分，因此需要滚动，您不能使用onLeave来触发您需要在特定滚动位置执行的操作，因为在您想要调用事件的时候，您还没有离开该部分。举个例子，我们在向下滚动时隐藏固定标题的某些方面，以便它不会重叠内容。我们不能使用onLeave来实现这一点。我们必须监视滚动。 - Laurence Cope