2014-12-11 52 views
0

考虑下面的代码:菜单锚杆不正常(fullpage.js)

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

锚标签不固定在顶部和不显示为按钮。当它进入第二页时,它消失。但在演示中,它显示为很好的按钮,并保持在顶部。

演示页:Click Here

回答

0

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

如果要准确运用其作为fullPage.js Demo,然后选择:

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