Question

默认情况下，菜单会显示在每个页面上。我想让菜单不显示在第一页上。我做了以下事情：

 $('#fullpage').fullpage({
    verticalCentered: true,
    scrollingSpeed: 600,
    css3: true,
    onLeave: function(index, nextIndex, direction){
        if (index == 2 && direction == 'up'){
            $('#menu').css('visibility','hidden');
        }
    },
    afterLoad: function(anchorLink, index){
        if (index == 2){
            $('#menu').css('visibility','visible');
        }
    }

现在，当我滚动到第二页时会出现菜单，当我滚动到第一页时会隐藏。但是这样菜单不是第二页的一部分，只是根据位置改变可见性。

我想要以下内容：当它滚动到第一页时，菜单应保持在第二页。相反，当它从第一页滚动到第二页时，菜单应该在第二页上。

P.S。现在在html中，菜单放在整页包装器之外。

P.P.S。该网站将有两个以上的页面，我想将菜单附加到窗口的顶部。

P.P.P.S。我做了我想做的事。但它很糟糕 - http://jsfiddle.net/a3dw6p4w/

Answer 1

我想要以下内容：当它滚动到第一页时，菜单应保持在第二页。

使用固定位置菜单。这对CSS而言不是jQuery：

#menu{
    position:fixed;
    top: 30px;
    left: 30px;
    z-index:999;
}

Answer 2

以下是如何做到这一点：

的Javascript

<script>
  $(document).ready(function(){
  $('#fullpage').fullpage({
    verticalCentered: true,
    scrollingSpeed: 1200,
    css3: true,
    afterLoad: function(anchorLink, index){
        if (index > 1){
            $('#menu').fadeTo("slow",1);
        }
    },
    onLeave: function(index, nextIndex, direction){
        if (index == 2 && direction == 'up') {
            $('#menu').fadeTo("slow",0);
        }
    }
  });
    });
</script>

它表示如果在页面加载时，如果滚动到下面的部分（索引＆gt; 1），则菜单将缓慢淡入。

然后，如果从第二部分向上滚动（即向第1部分），它将逐渐淡出。

fullpage.js如何将固定菜单附加到第二部分

2 个答案: