Question

我为scrollspy设置的数据偏移量的任何值根本不起作用。以下是相关的html，css和js代码：

HTML

<nav class="navbar navbar-fixed-top navbar-default">
  <div class="container-fluid">
    <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="#"><strong>YOUNG'S PORTFOLIO</strong></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right enlargeItem">
        <li><a href="#aboutBox">ABOUT</a></li>
        <li><a href="#portfolioBox">PORTFOLIO</a></li>
        <li><a href="#contactBox">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

body {
      background-color: gray;
      padding-top: 110px;
      data-spy='scroll';
      data-target='.navbar';
      data-offset='';
      position: relative;
    }

JS

$('body').scrollspy();

当我滚动到定义标记的目标区域（#aboutBox，＃portfolioBox，＃contactBox）时，它会突出显示相应的列表项。

然而，它有点偏差，所以我想通过改变数据偏移来改变偏移，但是改变数据偏移不会做任何事情。

以下是codepen的链接，如果有人想要查看整件事情

Answer 1

哎呀。我的代码错误了。

我试图使用CSS设置属性！ WOW菜鸟的错误。我需要一些睡眠。
我使用的是navbar-fixed-top类。所以我不得不手动偏移150px。

我将此应用于我的javascript：

$("body").attr({
    "data-spy": "scroll",
    "data-target": ".navbar"
  }).scrollspy({
    offset: 150
  });

Bootstrap Scrollspy中的数据偏移量并非完全偏离

1 个答案: