Bootstrap 3 scrollspy 不工作，codepen答案

【问题标题】：Bootstrap 3 scrollspy not working, codepenBootstrap 3 scrollspy 不工作，codepen
【发布时间】：2018-03-27 16:54:54
【问题描述】：

这是我在这里的第一篇文章，所以如果我做错了什么，请不要生我的气。

情况如下：尝试将 bootstrap 3 scrollspy 功能添加到我在 codepen 上的代码中，但它基本上不起作用。尝试了stackoverflow等不同的解决方案，但没有任何帮助。

有没有好心人可以看一下我的代码？

HTML：

            <div class="container-fluid">
            <nav class="navbar navbar-default navbar-fixed-top">
            <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>
              <a class="navbar-brand" href="#">Patryk Jamróz</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact </a></li>
              </ul>    
          </nav><!-- navbar -->    
            <div data-spy="scroll" data-target="#nav" data-offset="0">        
            <h3 class="text-center" id="about">about</h3>
    <h3 class="text-center" id="projects">projects</h3>
    <h3 class="text-center" id="contact">contact</h3>
</div>

CSS：

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

body {
  position: relative;
}

在我包含的 codepen 设置选项卡中：

CSS： bootstrap.min.css

JS： jquery.min.js bootstrap.min.js

这是我的 codepen 的链接：https://codepen.io/PatrykJamroz/full/RMZJva

【问题讨论】：

一个问题可能是你有这个：<div data-spy="scroll" data-target="#nav" data-offset="0">，但我没有看到任何与data-target="#nav" 相关的id="nav" 元素。我认为 id 应该在 nav 元素上

标签： javascript html css twitter-bootstrap scrollspy

【解决方案1】：

首先你需要启动 body 而不是 div 标签，所以你的 body 应该有以下内容：

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

而不是：

<div data-spy="scroll" data-target="#nav" data-offset="0">

因为 body 是滚动事件所附加的东西，所以除非你用那个 div 滚动，否则启动一个 div 并没有什么好处。

接下来，您需要将其附加到 .navbar 或 nav 本身将是最佳做法。而且我看到您使用的是 jquery 3，这可能会导致 bootstrap 3 出现问题，因此您可能需要切换到 jquery 2。

【讨论】：

【解决方案2】：

我认为您并不真正了解 bootstrap scrollspy 的实际工作原理。您必须将“身体”作为主要的滚动间谍容器！看看：

$('body').scrollspy({ 
  target: '#bs-example-navbar-collapse-1' 
})

$('#scrollDiv').on('activate.bs.scrollspy', function () {
  //Do stuff if there is a new event in scrollspy
})

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

body {
  position: relative;
}

<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
  
  
  <nav class="navbar navbar-default navbar-fixed-top">
    <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>
      <a class="navbar-brand" href="#">Patryk Jamróz</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact </a></li>
      </ul>    
  </nav><!-- navbar -->
    
    <div>
    
    
<div id="about" class="col-md-12">
    <h3 class="text-center">about</h3>
    
    <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
      </div>
      <div class="col-sm-6">
        <h4>Mechanical Designer</h4>
        <p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
      <span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
      <span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
      <span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
      <span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
    <span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
        </div>
        </div>
    </div>
</div> <!-- About section -->

  <hr>
<div id="projects" class="col-md-12">
  <h3 class="text-center">projects</h3>

     <div class="row">
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
           1st well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
           2nd well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           3rd well
         </div>
       </div>
     </div> <!-- Projects 1st row -->

    <div class="row">
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           4th well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           5th well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           6th well
         </div>
       </div>
     </div> <!-- Projects 2nd row -->
</div>
<hr>

<div id="contact" class="col-md-12">
  <h3 class="text-center">contact</h3>

<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<a href="mailto:jamroz.patryk@gmail.com"><h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk@gmail.com</h4></a>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">E-mail</span>
  <input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Name</span>
  <input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="basic-addon1">Message</span>
  <input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button">Send!</button>
   </span>
</div> <!-- message input -->
</div>

<div class="col-xs-12" style="height:50px;"></div>


<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
    
</div><!-- Container fluid -->

这样就可以了！祝你好运，再见。

【讨论】：

【解决方案3】：

你可以试试 whit jquery

    $("#yourtarget").click(function() {
    $('html, body').animate({
        scrollTop: $("#yourDiv").offset().top
    }, 2000);
});

【讨论】：