将导航绑定到全屏幻灯片
Bind navigation to fullscreen slides
我正在使用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
并使用右侧的导航。
一种可能的解决方案是,不是通过切换其 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 个 link 时,它会转到第 4 部分。另一方面,当您单击第 3 个 link,它也会转到第 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/
现在,当您单击左侧的导航栏时,一切都会按预期进行,尽管当您使用鼠标滚轮时,它看起来仍然有点 funky:因为第 3 节不会'如果不启用,当第三个和第四个 link 处于活动状态时,将显示第 4 部分。这种情况下的预期行为是什么?
不是想质疑你这样做的理由,但在可用性方面,删除第三部分和第三个导航可能会更好link,因为用户如果看到可能会感到困惑4 个导航 link,但滚动时只有 3 个部分。
我正在使用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
并使用右侧的导航。
一种可能的解决方案是,不是通过切换其 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 个 link 时,它会转到第 4 部分。另一方面,当您单击第 3 个 link,它也会转到第 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/
现在,当您单击左侧的导航栏时,一切都会按预期进行,尽管当您使用鼠标滚轮时,它看起来仍然有点 funky:因为第 3 节不会'如果不启用,当第三个和第四个 link 处于活动状态时,将显示第 4 部分。这种情况下的预期行为是什么?
不是想质疑你这样做的理由,但在可用性方面,删除第三部分和第三个导航可能会更好link,因为用户如果看到可能会感到困惑4 个导航 link,但滚动时只有 3 个部分。