javascript - 将导航绑定(bind)到全屏幻灯片

Question

我正在使用 fullpage.js 生成全屏滑动网站。

我有四个 sections，其中有四个导航点作为插件生成的 li。第一个 li a 链接到 first section，第二个 li a 链接到 second section，等等。

section1    li a
section2    li a
section3    li a 
section4    li a

点击 section3 被移除。现在我的部分少于导航点。

section1    li a
section2    li a
section4    li a
            li a

出于某种原因，我需要第四个 li a 仍然能够链接到 section4。

虽然我想在有人点击 third li a 时触发函数 restoreSection3()

有人可以帮我解决这个问题吗？您可以查看 jsfiddle example 以便更好地理解。尝试删除 section3 并使用右侧的导航。

Answer 1

一种可能的解决方案是，不是通过切换其显示 来移除幻灯片，而是通过将其高度 设置为0 来移除幻灯片，并隐藏其内容溢出。

像这样:

function removeSection3() {
    // hide it by setting a height of 0, hiding overflow, and setting display to `block`
    $("#f03").css({ display:"block", height:0, overflow:"hidden"});
    silentScroll($('.fp-section.active').position().top);
}

function restoreSection3() {
    // resetting the display to `table` will make the overflow visible again
    $("#f03").css({ display:"table"});
    silentScroll($('.fp-section.active').position().top);
}

您可以在这个 JSFiddle 上看到该代码的演示:http://jsfiddle.net/97tbk/616/

现在，当您单击第 4 个链接时，它会转到第 4 部分。不利的一面是，当您单击第 3 个链接时，它也会转到第 4 部分。因此，让我们通过添加一个事件监听器来完成请求，该事件监听器将在单击第三个 li a 时触发 restoreSection3():

$("#fp-nav li:nth-child(3) a").on("click", function() {
    // we restore section 3 by simulating clicking on the "Restore Section 3" button
    $('button#first').click();
});

所以最后的代码应该是这样的:

function removeSection3() {

    // hide it by setting a height of 0 and hiding the overflow
    $("#f03").css({ display:"block", height:0, overflow:"hidden"});

    // add an event listener, so when the third link is clicked, section 3 will be restored
    $("#fp-nav li:nth-child(3) a").on("click", function() {
        // we restore by simulating clicking on the "Restore Section 3" button
        $('button#first').click();
    });

    silentScroll($('.fp-section.active').position().top);
}

function restoreSection3() {
    // reset the display to table will make the overflow visible again
    $("#f03").css({ display:"table"});
    silentScroll($('.fp-section.active').position().top);
}

您可以看到它在另一个 JSFiddle 上工作:http://jsfiddle.net/97tbk/618/

现在，当您单击左侧的导航栏时，一切都按预期工作，尽管当您使用鼠标滚轮时它仍然看起来有点古怪:因为第 3 部分不会启用，当第三个和第四个链接处于事件状态，将显示第 4 部分。这种情况下的预期行为是什么？

不是想质疑你这样做的理由，但在可用性方面，删除第三部分和第三个导航链接可能会更好，因为如果用户看到 4 个导航链接但只有 3 个，他们可能会感到困惑滚动时的部分。