Question

由于某些奇怪的原因，scrollspy导致我的第二个列表项在页面加载时处于活动状态而不是第一个列表项。这很奇怪，因为用鼠标滚动一下后，它会使正确的列表项处于活动状态。除了这个错误，它完美地运作。如果有人能帮助我，我们将不胜感激。

继承人我的HTML：

    <!DOCTYPE html>
    <html lang="en">
   <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

  </head>
   <body data-spy="scroll" data-target=".navbar" data-offset="111">
  <header id="home">
   <nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        Determined Divas
        <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li  id="home" class="active"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#whoWeAre">Who We Are</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid" id="content">
<!-- Home page row -->
  <div class="row" id="home">
    <div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
  </div>

  <!-- About Section -->
  <section class="row" id="about">     
           <!-- Title -->
    <div class="row title-row"> 
      <div class="col-sm-12">
        <h1>About</h1>
      </div>
    </div>
          <!-- Content -->
    <div class="row content-row">

    </div>
  </section>


  <!-- Who We Are Section -->
  <section class="row" id="whoWeAre">     
           <!-- Title -->
    <div class="row title-row"> 
      <div class="col-sm-12">
        <h1>Who We Are</h1>
      </div>
    </div>
          <!-- Content -->
    <div class="row content-row">

    </div>
  </section>


  <!-- Gallery -->
  <section class="row" id="gallery">     
           <!-- Title -->
    <div class="row title-row"> 
      <div class="col-sm-12">
        <h1>Gallery</h1>
      </div>
    </div>
          <!-- Content -->
    <div class="row content-row">

    </div>
  </section>


  <!-- Contact-->
  <section class="row" id="contact">     
           <!-- Title -->
    <div class="row title-row"> 
      <div class="col-sm-12">
        <h1>Contact</h1>
      </div>
    </div>
          <!-- Content -->
    <div class="row content-row">

    </div>
  </section>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>

 </body>
 </html>

继承人的CSS：

    body{
        position: relative;
        background-color: #FFF2E2;
        color: white;
        font-family: 'Raleway', sans-serif;

       /*Keeps page content under the header, must match navbar height*/
      /*padding-top: 75px; */

     }

    /*NAV STYLING*/
    .navbar-default{
        height: 76px;
        transition: all 0.5s;
        -webkit-animation: all 0.5s;

    }
    .navbar-default .navbar-nav{
        font-weight: bold;
    }
    .navbar-default .navbar-brand {
      color: white;
      font-size: 2.0em;
      font-family: 'Poiret One', cursive;
      font-weight: bolder;
    }

     .navbar-default .navbar-nav>li>a {
        color: white;
    }

      .navbar-default .navbar-nav>li>a:hover {
      color: #777;
    }

   .navbar-default {
       background-color: #E498AF;
   }

    /*Controls active nav items*/
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus {
      color: #777;

   }


        /*Animate nav on scroll*/
    .cbp-af-header-shrink{
       height: 51px;

     }

    /*Full screen image styles*/
    .fill{
      background-size: cover;
      background-position: center;
     }

     /*Title Row Styling*/
    .title-row{
        height: 100px;
        color: #777;
        background-color: #FFF2E2;
        text-align: center;
     }

    /*Content row styling*/
    .content-row{
       height: 600px;
       background-color: white;
  }

Answer 1

那是因为你有

<body data-spy="scroll" data-target=".navbar" data-offset="111">

navbar类的数据目标，但你的html标记有

  <div id="navbar" class="collapse navbar-collapse">

id navbar;切换任何一个，应该工作。

bootstrap scrollspy将查找目标，如果无法找到目标或未指定目标，则默认为nav。最好将scrollspy放在只包含导航

的div上

这是一个fiddle example

Scrollspy在页面加载时激活了错误的链接

1 个答案: