Question

首先，我对网页设计一般都很陌生，所以我希望我的问题不是太愚蠢。我正在建立一个带有整页js的网站，并且完成了部分和总体布局。现在我希望右侧的固定菜单显示在除第一个页面之外的所有页面上。我搜索了这个问题并找到了答案，但它对我不起作用。这是我的菜单：

<ul id="menu">
    <li data-menuanchor="Home" class="active"><a href="#Home">Home</a></li>
    <li data-menuanchor="About"><a href="#About">About</a></li>
    <li data-menuanchor="Classes"><a href="#Classes">Classes</a></li>
    <li data-menuanchor="pgClasses"><a href="#pgClasses">pgClasses</a></li>
    <li data-menuanchor="Contact"><a href="#Contact">Contact</a></li>
</ul>

在body标签内，但在#fullpage之外。

这是我发现的函数的js文件：

$(document).ready(function() {
    "use strict";

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

感谢您的帮助。

更新：我只是尝试在我的代码中包含一个标题菜单，该菜单应该只显示在第2部分以后。我用过这个

<header><ul id="topmenu">
    <li data-menuanchor="Home"><a href="#Home">Home</a></li>
    <li data-menuanchor="About"><a href="#About">About</a></li>
    <li data-menuanchor="Classes"><a href="#Classes">Classes</a></li>
    <li data-menuanchor="pgClasses"><a href="#pgClasses">pgClasses</a></li>
    <li data-menuanchor="Contact"><a href="#Contact">Contact</a></li>
    </ul></header>

这是在js文件中：

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

由于某种原因，它正在为标题工作。如果我用#menu替换所有“标题”，它仍然无效。

显然将#menu更改为ul。

Answer 1

我将此添加到http://alvarotrigo.com/fullPage

的全页演示的css文件中

.fp-viewing-firstPage #menu {
    visibility: hidden;
}

工作正常。显然，您需要将#menu变为#Menu。

整页js菜单不会隐藏在第一页上

1 个答案: