Question

我正在建立一个带有部分的网站，我希望他们在每个部分上滚动。为此，我使用fullpage.js和所有工作的好。我也有一个菜单，我希望当我们在第一部分时，第一个选项卡是活动的。这是问题，如果我把数据-spy =＆＃34;滚动＆＃34;在我的身体标签上，它只是最后一个有效的标签。我使用bootstrap作为css。

这是我的html页面，没有所有未提及的类和div

<body data-spy="scroll" data-target=".navbar">
    <div class="nav_div col-sm-offset-5 col-sm-7"> 
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-center">
                <li class="active"><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>    
    </div>
    <span id="fullpage" class="col-sm-12">
        <section id="link" class="section active">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
    </span>
</body>

这里是我的js在滚动时有活动标签，如果我停用fullpage.js就可以了。

$(function() {
         "use strict";
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({scrollTop: target.offset().top}, 700);
                    return false;
                }
            }
        });
    });

和fullepage js

$(document).ready(function() {
        $('#fullpage').fullpage({
            responsiveWidth: 768,
            scrollOverflow: true
        });
    });

Answer 1

这是在Documentation，转到选项然后菜单。

menu :(默认为false）选择器可用于指定菜单链接部分。这样滚动部分就可以了使用活动类激活菜单中的相应元素。这不会生成菜单，只会将活动类添加到给定菜单中的元素以及相应的锚链接。在为了将菜单的元素与部分链接起来，HTML 5 数据标签（data-menuanchor）将需要与同一个锚一起使用这些部分中使用的链接。例如：

导航示例

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

JS示例

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

您必须向所有锚链接添加HTML 5数据标记（data-menuanchor），并为HREF使用相同的名称。

data-menuanchor="firstPage" and href="#firstPage"

然后将它们与您的UL ID / Class一起添加到您的函数中。

anchors: ['firstPage', 'secondPage', 'thirdPage'],
menu: '#myMenu'

在完整页面的Snippet中查看工作示例。

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    fixedElements: '.navbar-fixed-top',
    menu: '#bs-nav',
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    css3: true
  });
  //So the Mobile Nav Hides When a Link is Clicked
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});

p {
  font-size: 26px;
  text-align: center;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul id="#nav" class="nav navbar-nav">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First Page</a>

        </li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Second Page</a>

        </li>
        <li data-menuanchor="thirdPage"><a href="#thirdPage">Third Page</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="fullpage">
  <div id="one" class="section">
    <p>1 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
  <div id="two" class="section">
    <p>2 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
  <div id="three" class="section">
    <p>3 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
</div>

主动导航栏无法正常工作

1 个答案: