Question

我有关于助推器的滚动间谍的问题。我正在使用body方法“data-spy =”scroll“它似乎适用于边缘，而其他一些人声称它适用于谷歌浏览器。但经过无数次查看它仍然不适合我。我问过我的朋友测试它，他们说同样的事情是它不能在这里工作的是带有错误的项目的链接：http://edgaraxe.net/test/teamhusky/。滚动间谍不适合我的Chrome因为某些原因有人知道为什么？这是我的代码：

body {
    position: relative;
}
/*footer*/
.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}


.huskynav .navbar-brand {
  height: 80px;
}

.huskynav .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.huskynav .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}
/*deviders*/
.home{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #423840;
}

.about {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #8dd8f8;
}

.service {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #9D714F;
}

.info{
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.contact {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>
  <body class="scroll-area" data-spy="scroll" data-offset="0">
<div class="huskynav">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigate">
          <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="#"><img src="img/teamhuskylogo.png" alt="Team Husky Logo">
        </a>
      </div>
      <div id="navigate" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">Profolio</a></li>
          <li><a href="#service">Service</a></li>
          <li><a href="#info">Info</a></li>
          <li><a href="#contact">Contact us</a></li>

        </ul>
      </div>
      <!--/.nav-collapse -->

    </div>
    <!--/.container-fluid -->
  </nav>
</div>



<section id="home" class="home">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
              <h1>Home</h1>
            </div>
        </div>
    </div>
</section>

<section id="about" class="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Profolio</h1>
                <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
            </div>
        </div>
    </div>
</section>

<section id="service" class="service">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Service</h1>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="info" class="info">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Info</h1>
            </div>
        </div>
    </div>
</section>


<section id="contact" class="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Contact us</h1>
            </div>
        </div>
    </div>
</section>
</body>
 Run code snippetCopy snippet to answerHide results

正如您所看到的，堆栈溢出中的代码运行完美，但请务必查看上面提供的Google Chrome中的链接。非常感谢你！

Answer 1

您正在调用两个版本的Bootstrap JS文件，我删除了您的本地版本并离开了托管版本，它可以正常工作。

这是一个有效的codepen

http://codepen.io/hoonin_hooligan/pen/rLzLbK

 <link href="css/style.css" rel="stylesheet">
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">       </script>
 <!-- Removed your code here -->
 <script src="js/custom.js"></script>

滚动间谍谷歌浏览器的Bootstrap 3问题

1 个答案: