使用 fullPage onLeave 时锚点不起作用
Anchor Points Not Working using fullPage onLeave
我的菜单和锚点一切正常,但在添加以下代码后链接停止工作:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
//after leaving section 2
if(index == 1 && direction =='down'){
$('header').addClass('active');
}
else if(index == 2 && direction == 'up'){
$('header').removeClass('active');
}
}
});
我的意图是隐藏我的 header 并仅在第二部分之后显示它,这发生了但锚点不再起作用。
我的headerhtml
<header>
<ul id="myMenu">
<li data-menuanchor="topo" class="active"><a href="#topo"><img src="img/dcb-white.svg"></a></li>
<li data-menuanchor="contato"><a href="#contato">Contato</a></li>
<li data-menuanchor="sobre"><a href="#sobre">Sobre Mim</a></li>
<li data-menuanchor="historico"><a href="#historico">Histórico</a></li>
<li data-menuanchor="portfolio"><a href="#portfolio">Portfolio</a></li>
<li data-menuanchor="topo" class="active"><a href="#topo">Topo</a></li>
</ul>
</header>
header css
header{
position:fixed;
height: auto;
display:block;
width: 100%;
background: #000;
z-index:9;
text-align:center;
color: #fff;
top:0px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}
header.active {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}
In 能够使用 css 实现我想要的效果,但我仍然不明白为什么 onLeave 代码不起作用:
嗯,基本上你不是在告诉 fullpage.js 你想使用锚点。
您必须在初始化(您未使用)中使用 anchors
选项,或者在每个部分中使用 data-anchor
属性。 (看来你两者都没有使用)
了解更多信息 in the documentation。
anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor as explained here.
我的菜单和锚点一切正常,但在添加以下代码后链接停止工作:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
//after leaving section 2
if(index == 1 && direction =='down'){
$('header').addClass('active');
}
else if(index == 2 && direction == 'up'){
$('header').removeClass('active');
}
}
});
我的意图是隐藏我的 header 并仅在第二部分之后显示它,这发生了但锚点不再起作用。
我的headerhtml
<header>
<ul id="myMenu">
<li data-menuanchor="topo" class="active"><a href="#topo"><img src="img/dcb-white.svg"></a></li>
<li data-menuanchor="contato"><a href="#contato">Contato</a></li>
<li data-menuanchor="sobre"><a href="#sobre">Sobre Mim</a></li>
<li data-menuanchor="historico"><a href="#historico">Histórico</a></li>
<li data-menuanchor="portfolio"><a href="#portfolio">Portfolio</a></li>
<li data-menuanchor="topo" class="active"><a href="#topo">Topo</a></li>
</ul>
</header>
header css
header{
position:fixed;
height: auto;
display:block;
width: 100%;
background: #000;
z-index:9;
text-align:center;
color: #fff;
top:0px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}
header.active {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
}
In 能够使用 css 实现我想要的效果,但我仍然不明白为什么 onLeave 代码不起作用:
嗯,基本上你不是在告诉 fullpage.js 你想使用锚点。
您必须在初始化(您未使用)中使用 anchors
选项,或者在每个部分中使用 data-anchor
属性。 (看来你两者都没有使用)
了解更多信息 in the documentation。
anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor as explained here.