Question

我的菜单和锚点一切正常，但添加以下代码后链接停止工作：

$('#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');

        }
    }
});

我的目的是隐藏我的标题并仅在第二部分之后显示它，但这会发生，但锚点不再起作用。

我的标题html

<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>

标题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;
}

Answer 1

In能够完成我想要使用css的效果，但我仍然不明白为什么onLeave代码不起作用：

Watch this video to understand how I did it: youtube.com/watch?v=qiCVPpI9l3M

Answer 2

好吧，基本上你没有告诉fullpage.js你想使用锚点。

您必须在初始化（您未使用）中使用anchors选项，或者在每个部分中使用data-anchor属性。（这似乎你没有使用）

详细了解in the documentation。

anchors：（默认[]）定义要在每个部分的网址上显示的锚链接（#example）。 Anchor值应该是唯一的。数组中锚点的位置将定义锚点应用于哪些部分。（第二部分的第二个位置，依此类推）。通过浏览器也可以使用锚点向前和向后导航。此选项还允许用户为特定部分或幻灯片添加书签。小心！ anchors不能与站点上的任何ID元素（或IE的NAME元素）具有相同的值。现在可以使用属性data-anchor直接在HTML结构中定义锚点，如此处所述。

锚点不使用fullPage onLeave工作

2 个答案: