我的 Bootstrap Scrollspy 出了什么问题？答案

【问题标题】：What's wrong with my Bootsrap Scrollspy?我的 Bootstrap Scrollspy 出了什么问题？
【发布时间】：2017-06-15 09:17:06
【问题描述】：

我敢打赌，你以前看过一些 codepen 问题。

我的是这个：https://codepen.io/fender90/pen/KqVLba

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One">

<body data-spy="scroll" data-target="#navbar">

<!-- navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="#navbar">

<div class="navbar-header">
  <a class="navbar-brand nav-link" href="#">Fabio M.</a>
</div>

<ul class="nav navbar navbar-nav">
  <li><a href="#back-about-me">About Me</a></li>
  <li><a href="#back-portfolio">Portfolio</a></li>
  <!-- <li><a href="#">Contacts</a></li> -->
</ul>

<ul class="nav navbar-nav navbar-right">
  <li><a href="https://www.facebook.com/fabio.mancin"><i class="fa fa-facebook-official fa-lg"> Fabio's Facebook</i></a> </li>
  <li><a href="https://codepen.io/fender90"><i class="fa fa-codepen fa-lg"> Fabio's CodePen</i></a></li>
</ul>

</nav>

<div class="back-about-me" id="back-about-me">
<div class="container about-me-cont">
  <div class="row">

    <div class="col col-xs-3 col-sm-3 col-md-3 col-lg-3 container about-me">
      <img class="img-rounded center-block" src="https://scontent.xx.fbcdn.net/v/t1.0-9/10949705_10205992913732102_8367443127330721627_n.jpg?oh=e6625471e817c4da6fd65aba5f283567&oe=59E1772C" title="Fabio's face. Sexy!" alt="A picture of Fabio's face.">
    </div>

    <div class="col col-xs-9 col-sm-9 col-md-9 col-lg-9 text-center about-me-text container about-me">
      <p style="margin: auto">27, based in Venice, Italy. Always had a passion for foreign languages and computers; decided to study foreign languages, now trying hard to learn to code. Hope to work with both in the future. This page is just a proof of concept.. for now!<br><br>I'll
        add some cool stuff like "Front-End Developer" here someday :).</p>
    </div>

  </div>
</div>
</div>

<div class="back-portfolio" id="back-portfolio">
<div class="back-title">
  <p class="text-center" id="fabio-port">FABIO'S PORTFOLIO</p>
</div>
<div class="container">
  <div class="row">

    <div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
      <a href="https://codepen.io/fender90/full/NgxbrP/">
        <img src="https://codepen.io/fender90/pen/NgxbrP/image/small.png" alt="Preview of Fabio's first ever project. Very ugly." title="James Hetfield Tribute Page" class="center-block"></a>
      <p class="port-1-p text-center"><br>This is Fabio's first ever project. It's extremely ugly, what did you expect from someone who's been into HTML for 2 days?</p>
    </div>

    <div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
      <a href="https://codepen.io/fender90/full/KqVLba">
        <img src="https://codepen.io/fender90/pen/KqVLba/image/small.png" alt="Preview of Fabio's second project. It's the one you're on." title="Fabio's Portfolio" class="center-block"></a>
      <p class="port-1-p text-center"><br>It's the page you're on. Second project, a bit better than the first one!</p>
    </div>

  </div>

  <div class="row">
    <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>Placeholder. Who knows what's gonna appear here?</p>
    </div>

    <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>Placeholder. You can bet you'll find something beautiful here!</p>
    </div>

    <div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
    </div>

  </div>
  <div class="row">
    <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>Guess what? It's a placeholder!</p>
    </div>

    <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>I think you know the drill by now..
</p>
    </div>

    <div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
      <a href="#">
        <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
      <p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
        </div>

      </div>
    </div>
</div>
</body>

CSS

* {
overflow: auto;
}

body {
position: relative;
height: 100%;
overflow: auto;
}

.fa, .navbar, .navbar-inverse {
overflow: hidden;
}

.row, .about-me {
display: flex;
height: 100%;
}

.navbar-inverse {
font-size: medium;
padding: 10px;
}

.navbar-right {
margin-top: -42px;
}

/** ul.nav a:hover { 
color: rgb(247, 250, 255) !important; 
} **/

.img-rounded {
width: 100%;
height: auto;
margin: auto;
overflow: hidden;
}

.about-me-text {
font-family: Roboto;
font-size: 1.5em;
font-weight: bold;
margin: auto;
align-content: center;
}

.back-about-me {
background-color: rgba(63, 20, 81, 0.8);
height: 100%;
padding-bottom: 30px;
}

.about-me-cont {
background-color: rgb(215, 229, 228);
border-style: solid;
padding: 10px;
height: 20em;
overflow: none;
margin-top: 30px;
}

.back-portfolio {
background-color: rgba(0, 0, 0, 0.8);
}

#fabio-port {
font-weight: bold;
font-size: 3em;
font-family: Bubbler One;
color: rgba(0, 0, 0, 0.7);
background-color: rgb(221, 210, 0);
margin: 1em;
}

.col-port {
border: solid;
width: 390px;
height: auto;
background-color: rgb(194, 202, 214);
font-weight: bold;
padding: 1em;
margin: 1em;
}

.placeholder {
height: 200px;
}

jQuery

$(window).load(function() {
var navheight = parseFloat($(".navbar").height());
$("body").css({ "margin-top": navheight + 20 + "px" });
});

为什么滚动间谍不起作用？导航栏中的元素在滚动时不会突出显示。

我关注了these instructions。

也尝试过

$('body').scrollspy({target: "#navbar"})

没有运气。

提前致谢！

【问题讨论】：

标签： jquery html css bootstrap-4

【解决方案1】：

如果您注意到控制台，它会显示

Bootstrap 的 JavaScript 需要 jQuery 1.9.1 或更高版本，但低于 4 版本

您使用了较低版本的jQuery。修复它，它就会工作。

在下面的示例中，我使用了v3.1.1 [Go fullscreen and check]：

$(window).load(function() {
  var navheight = parseFloat($(".navbar").height());
  $("body").css({
    "margin-top": navheight + 20 + "px"
  });
});

* {
  overflow: auto;
}

body {
  position: relative;
  height: 100%;
  overflow: auto;
}

.fa,
.navbar,
.navbar-inverse {
  overflow: hidden;
}

.row,
.about-me {
  display: flex;
  height: 100%;
}

.navbar-inverse {
  font-size: medium;
  padding: 10px;
}

.navbar-right {
  margin-top: -42px;
}


/** ul.nav a:hover { 
  color: rgb(247, 250, 255) !important; 
} **/

.img-rounded {
  width: 100%;
  height: auto;
  margin: auto;
  overflow: hidden;
}

.about-me-text {
  font-family: Roboto;
  font-size: 1.5em;
  font-weight: bold;
  margin: auto;
  align-content: center;
}

.back-about-me {
  background-color: rgba(63, 20, 81, 0.8);
  height: 100%;
  padding-bottom: 30px;
}

.about-me-cont {
  background-color: rgb(215, 229, 228);
  border-style: solid;
  padding: 10px;
  height: 20em;
  overflow: none;
  margin-top: 30px;
}

.back-portfolio {
  background-color: rgba(0, 0, 0, 0.8);
}

#fabio-port {
  font-weight: bold;
  font-size: 3em;
  font-family: Bubbler One;
  color: rgba(0, 0, 0, 0.7);
  background-color: rgb(221, 210, 0);
  margin: 1em;
}

.col-port {
  border: solid;
  width: 390px;
  height: auto;
  background-color: rgb(194, 202, 214);
  font-weight: bold;
  padding: 1em;
  margin: 1em;
}

.placeholder {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One">


<body data-spy="scroll" data-target="#navbar">

  <!-- navbar -->
  <nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">

    <div class="navbar-header">
      <a class="navbar-brand nav-link" href="#">Fabio M.</a>
    </div>

    <ul class="nav navbar navbar-nav">
      <li class="active"><a href="#back-about-me">About Me</a></li>
      <li><a href="#back-portfolio">Portfolio</a></li>
      <!-- <li><a href="#">Contacts</a></li> -->
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="https://www.facebook.com/fabio.mancin"><i class="fa fa-facebook-official fa-lg"> Fabio's Facebook</i></a> </li>
      <li><a href="https://codepen.io/fender90"><i class="fa fa-codepen fa-lg"> Fabio's CodePen</i></a></li>
    </ul>

  </nav>

  <div class="back-about-me" id="back-about-me">
    <div class="container about-me-cont">
      <div class="row">

        <div class="col col-xs-3 col-sm-3 col-md-3 col-lg-3 container about-me">
          <img class="img-rounded center-block" src="https://scontent.xx.fbcdn.net/v/t1.0-9/10949705_10205992913732102_8367443127330721627_n.jpg?oh=e6625471e817c4da6fd65aba5f283567&oe=59E1772C" title="Fabio's face. Sexy!" alt="A picture of Fabio's face.">
        </div>

        <div class="col col-xs-9 col-sm-9 col-md-9 col-lg-9 text-center about-me-text container about-me">
          <p style="margin: auto">27, based in Venice, Italy. Always had a passion for foreign languages and computers; decided to study foreign languages, now trying hard to learn to code. Hope to work with both in the future. This page is just a proof of concept.. for now!<br><br>I'll
            add some cool stuff like "Front-End Developer" here someday :).</p>
        </div>

      </div>
    </div>
  </div>

  <div class="back-portfolio" id="back-portfolio">
    <div class="back-title">
      <p class="text-center" id="fabio-port">FABIO'S PORTFOLIO</p>
    </div>
    <div class="container">
      <div class="row">

        <div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
          <a href="https://codepen.io/fender90/full/NgxbrP/">
            <img src="https://codepen.io/fender90/pen/NgxbrP/image/small.png" alt="Preview of Fabio's first ever project. Very ugly." title="James Hetfield Tribute Page" class="center-block"></a>
          <p class="port-1-p text-center"><br>This is Fabio's first ever project. It's extremely ugly, what did you expect from someone who's been into HTML for 2 days?</p>
        </div>

        <div class="col col-xs-6 col-sm-6 col-md-6 col-lg-6 col-port">
          <a href="https://codepen.io/fender90/full/KqVLba">
            <img src="https://codepen.io/fender90/pen/KqVLba/image/small.png" alt="Preview of Fabio's second project. It's the one you're on." title="Fabio's Portfolio" class="center-block"></a>
          <p class="port-1-p text-center"><br>It's the page you're on. Second project, a bit better than the first one!</p>
        </div>

      </div>

      <div class="row">
        <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>Placeholder. Who knows what's gonna appear here?</p>
        </div>

        <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>Placeholder. You can bet you'll find something beautiful here!</p>
        </div>

        <div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
        </div>

      </div>
      <div class="row">
        <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>Guess what? It's a placeholder!</p>
        </div>

        <div class="col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>I think you know the drill by now..</p>
        </div>

        <div class="col col col-xs-4 col-sm-4 col-md-4 col-lg-4 col-port">
          <a href="#">
            <img src="http://www.euneighbours.eu/sites/default/files/2017-01/placeholder.png" alt="Placeholder image." title="Placeholder." class="center-block placeholder"></a>
          <p class="port-1-p text-center"><br>Yet another placeholder. So much to do, so little time..</p>
        </div>

      </div>
    </div>
  </div>
</body>

CodePen Link

同时更正以下行：

<nav class="navbar navbar-inverse navbar-fixed-top" id="#navbar">

到

<nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">

# 应该只出现在元素的 data-target 中，而不是实际的 id 中。

【讨论】：

【解决方案2】：

您的主要问题之一是 CSS class 和 id 的命名约定。

使用类（. 表示法）如果它不是唯一的并且会重复。
如果 id 是唯一的，请使用 id（# 表示法）。

我猜问题是，浏览器遇到了无法识别部分的唯一 id 标签的问题。

我会在找到答案后编辑我的回复。

编辑：答案已在此处发布。

【讨论】：

为什么不格式化内容并将其发布为答案而不是评论？
只是因为他作为一种学习经验来纠正自己的错误会更好，尤其是当它们像重命名一些 CSS 类/id 名称一样简单时。
这不是我的意思。这里让我为你编辑一下。 @Mobeen
抱歉，我以为你指的是他的代码。感谢您清理我的回复，我会确保改进格式和布局，以便我将来做出任何回复。
我知道，这很丑。我需要一些时间来思考不要用不必要的 id 和类来膨胀代码。感谢您的建议！