菜单锚点栏无法正常工作(整页.js）

The menu anchor bar is not functioning properly(fullpage.js)

本文关键字：js 工作 常工作 整页 菜单      更新时间：2023-09-26

请考虑以下代码：

<!DOCTYPE html>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/style.css" />">
<link rel="stylesheet" type="text/css" media="all" href="<c:url value="/resources/css/styles/jquery.fullPage.css" />">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="<c:url value="/resources/js/jquery.easings.min.js" />" type="text/javascript"></script>
<script src="<c:url value="/resources/js/jquery.fullPage.js" />" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(' #fullpage ').fullpage({
             sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
             anchors: ['firstPage', 'secondPage', 'thirdPage'],
             menu: ' #mymenu ',
             css3: true
        });
    });
</script>
</head>
<body>

<ul id="mymenu">
<li data-menuanchor="firstPage"><a href="#firstPage">Health Metrics</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Client Login Information</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Active Operator Information</a>     </li>
</ul>
<div id="fullpage">

<div class="section">
 ## Stuffs
</div>

<div class="section">
 ## Stuffs
</div>
 <div class="section">
 ## Stuffs
</div>

</div>
</body>
<script type="text/javascript">

setTimeout(function(){
   window.location.reload(1);
}, 20000); 
</script>

</html>

"锚点"选项卡未固定在顶部，也不会显示为按钮。当它进入第二页时，它消失了。但是在演示中，它显示为漂亮的按钮并保持在顶部。

演示页面 ： 点击这里

这是

基本的CSS。与插件本身无关。你必须为它使用固定的位置...

如果您想完全按照整页.js演示中的样式应用它，则： 

#mymenu{
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
}
相关文章：