Question

我实现了fullPage.js脚本以进行整页滚动。

整页滚动效果很好。但是，我对菜单栏有问题。我似乎出现在这些部分后面。这些链接似乎也没有起作用。

我页面的html标记如下所示：

<html>
  <head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <!-- Use title if it's in the page YAML frontmatter -->
    <title>Adlit</title>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

    <link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/stylesheets/all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/javascripts/all.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.fullPage.js"></script>
    <script>
     $(document).ready(function() {
       $('#fullpage').fullpage(
        {
        anchors: ['home', 'news', 'info'],
        menu: '#menu' 
        }
       );
    }); 
    </script>
  </head>

  <body class="index">
    <div class="main">
      <nav id="menu">
        <ul>
          <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
          <li data-menuanchor="news"><a href="#news">Nieuws</a></li>
          <li data-menuanchor="info"><a href="#info">Info</a></li>
        </ul>
      </nav>

    <div id="fullpage">
    <div class="section home">
      <div class="hero">
        <h1>Adlit, Een onderzoeksproject rond reclamewijsheid bij minderjarigen</h1>
      </div>
    </div>
    <div class="section news">
      <div class="grid-items">
        <a href="javascript:void(0)" class="grid-item">
          <img src="images/logo-digital-kids-marketing.png" alt="digital kids marketing">
          <h1>Grid Item</h1>
          <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
        </a>
        <a href="javascript:void(0)" class="grid-item grid-item-big grid-item-image">
          <img src="images/logo-digital-kids-marketing.png" alt="digital kids marketing">
          <h1>Grid Item With an Image</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
        </a>
      </div>
    </div>
    <div class="section info">
      <div class="boxes">
        <div class="box">
          <p><i class="fa fa-users"></i></p>
          <h2>Wie zijn we</h2>
          <p>Non-profit an public affairs organizations need to communicate their message with a loud and clear voice</p>
        </div>
        <div class="box">
          <p><i class="fa fa-suitcase"></i></p>
          <h2>Wat doen we?</h2>
          <p>You’ll be hard-pressed to find a team more experienced building brands and websites for Democratic political campaigns. We’re design trend-setters and know political tech inside and out.          </p>
        </div>
        <div class="box">
          <p><i class="fa fa-newspaper-o"></i></p>
          <h2>Rapporten en Publicaties</h2>
          <p>We partner with agencies all the time to expand their services for their own clients. We fit in seamlessly. We can also do the same with your startup to get your big idea from “dream” to “reality”.</p>
        </div>
        <div class="box">
          <p><i class="fa fa-university"></i></p>
           <h2>Valorizatie tools</h2>
          <p>We can leverage our extensive experience in design, tech and brand strategy to promote your idea or product. Whether it’s a campaign, an org or you’re just selling a widget, the goal of our services is always the same: to inspire.</p>
        </div>
      </div>
      </div>
      </div>
    </div>
</body>
</html>

我对菜单栏的样式是：

nav {
  margin-top: em(20);
  margin-right: em(100);
  float: right;

  li {
    float: left;
    margin-right: em(40);
  }

  a {
    font-weight: 600;
    color: $dark-gray;

    &.active {
      padding-bottom: 2px;
      border-bottom: 3px solid $light-green; 
    }
  }
}

所以我不确定是怎么回事。我试图通过更改我的部分的z-index来修复它，但这似乎没有任何影响。这些部分出现在菜单栏的前面。

感谢您的帮助，

安东尼

Fullpage.js有效但菜单栏出现在部分后面

0 个答案: