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。

虽然我想在有人点击restoreSection3()

时触发功能third li a

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

Answer 1

一种可能的解决方案是，不是通过切换其display来移除幻灯片，而是通过将其height设置为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部分。因此，让我们通过添加一个事件监听器来完成请求，该监听器会在单击第三个restoreSection3()时触发li a：

$("#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/

上工作

现在当你点击左边的导航时，一切都按预期工作，虽然当你使用鼠标滚轮时它仍然看起来有点 funky ：因为第3节将不会被启用，当第三和第四个链接处于活动状态，将显示第4部分。这种情况的预期行为是什么？

不要试图质疑你以这种方式做事的理由，但就可用性而言，最好删除第三部分和第三部分导航链接，因为如果用户看到4个导航链接但只有3个，可能会感到困惑他们滚动时的部分。

将导航绑定到全屏幻灯片

1 个答案: