Question

我试图在我的网站上添加scrollspy的东西，但它还没有工作。当我在那个部分中滚动时，它并没有突出显示导航栏中的链接，因此我无法找出问题所在。我已粘贴代码并帮助我弄清楚它出错的地方。

var options = {
     hostname: 'www.google.com',

部分区域

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand page-scroll" href="#page-top" style=" font-family: 'Lobster Two', cursive, serif;font-size:25px">my website</a>
            <button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i></button>
            <!-- Navigation Bar List Contents -->
            <div class="clearfix hidden-md-up"></div>
            <div class="collapse navbar-toggleable-sm" id="navbarResponsive">
                <ul class="nav navbar-nav float-md-right">
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#about">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#sample">Sample Article</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#topics">Topics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#whyus">Why Choose Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#contact">Contact</a>
                    </li>
                    <li>
                    <a href="form.php" class="btn btn-md btn-info btn-block" role="button">Order now</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

您没有显示您的CSS，但我猜您没有将position body设置为relative。

来自Bootstrap's documentation：

无论执行方法如何，都需要使用scrollspy position: relative;在你正在监视的元素上。在多数情况下这是<body>。当滚动除了以外的元素时 <body>，请务必设置height和overflow-y: scroll;应用

Answer 2

将您的正文标记更新为：

<body id="page-top" data-spy="scroll" data-target=".navbarResponsive">

原因是您必须以引导程序.nav组件的父元素为目标

CSS：

body {
  position: relative;
}

HTML：

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

参考：Bootstrap 3 Documentation // Javascript: Scrollspy Usage

ScrollSpy无法在我的网站上运行

2 个答案: