Initializing/Uninitialized jQuery 页面更改插件

Question

我正在使用两个 jQuery 插件 fullpage 和 ferromenu。

fullpage 使 window 滚动整个页面，而 ferromenu 是一个整洁的圆形菜单，可以展开和折叠。

问题是，由于 fullpage 使我的整个网站成为一页，所以 ferromenu 显示在每个页面上，所以我不想只用 $(document).ready

初始化它

这是我尝试过的方法，但我现在遇到的问题是，当页面离开 url

时，它不会消失

$(window).on('hashchange', function(e){

var pageURL = $(location).attr("href");

if (pageURL === "https://www.example.com/index.php#thirdPage") {
    $("#custom-nav").ferroMenu({
            position    : "center-center"
    });
};

});

Answer 1

我不知道这是否是最好的方法，但我找到了它创建的 html 对象的 class 并且只是更改了属性在我的 if 语句的 else 部分。

$(window).on('hashchange', function(e){

var pageURL = $(location).attr("href");

if (pageURL === "https://www.example.com/index.php#thirdPage") {
    $("#custom-nav").ferroMenu({
            position    : "center-center"
    });
} else {
    $('.ferromenu-controller').css('display', 'none');
};

});

Answer 2

您应该使用 fullPage.js 提供的回调，例如 onLeave 和 afterLoad:

$(document).ready(function () {
    $("#custom-nav").ferroMenu({
        position: "center-center"
    });

    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        onLeave: function (index, nextIndex, direction) {
            //going to section 3 ?
            if (nextIndex == 3) {
                $('.ferromenu-controller').show();
            } else {
                $('.ferromenu-controller').hide();
            }

        }
    });
});

或者甚至使用 fullpage.js 添加到正文中的 css3 class，详见 this tutorial。

Initializing/Uninitialized jQuery 页面更改插件

Initializing/Uninitialized a jQuery plugin on page change

javascript

jquery

fullpage.js