向下滚动fullpage.js触发事件?

时间:2017-02-19 21:13:13

标签: javascript jquery fullpage.js

我想在用户向下滚动并更改部分时触发。

我想这样做:

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

我该怎么办? 如果我使用此代码不起作用,为什么?

谢谢你, 吉安马可。

1 个答案:

答案 0 :(得分:2)

在窗口无法向右滚动的情况下?

我认为你必须绑定鼠标滚轮事件。

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

但我想您可能想要整理fullpage.js methodeCallbacks。 当你离开第一张(或其他)幻灯片时,你可能应该让你的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");       
        }          
    }
});

onLeave

上的文档