将导航绑定到全屏幻灯片

Marian Rick 发表于 Dev

玛丽安·里克（Marian Rick）

我正在使用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示例以获得更好的理解。尝试删除section3并使用右侧的导航。

阿尔瓦罗·蒙托罗

一种可能的解决方案是，而不是通过切换幻灯片来删除幻灯片，而是将其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);
}