我正在使用 fullpage.js 生成全屏滑动网站。
我有四个部分
,其中有四个导航点,如插件生成的li
。第一个li a
链接到第一部分
,第二个li a
链接到第二部分
,依此类推
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
。
虽然我想在有人点击第三个li a
时触发函数restoreSection3()
有人可以帮我解决这个问题吗?您可以查看jsfiddle example 以便更好地理解。尝试删除 section3
并使用右侧的导航。
最佳答案
一种可能的解决方案是,不是通过切换其显示
来删除幻灯片,而是通过将其高度
设置为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 部分。因此,让我们通过添加一个事件监听器来完成请求,该事件监听器将在单击第三个 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 个,他们可能会感到困惑滚动时的部分。
关于javascript - 将导航绑定(bind)到全屏幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30527504/