Twitter bootstrap scrollspy不适用于导航丸和平滑滚动

Question

I am using Bootstrap's nav pills as my top navbar, and I have used a piece of code to scroll to a certain point on the page when a pill is clicked. 我将Bootstrap的导航药丸用作顶部导航条，并且单击了药片时，使用了一段代码滚动到页面上的特定点。 I am now trying to get scrollspy to work so the class of the pill will change from "active" to "disabled" (I have special css setup for the "disabled" class, but I'm having no luck. Any thoughts? 我现在正在尝试使scrollspy起作用，以便将药丸的类别从“活动”更改为“禁用”（我为“已禁用”类别设置了特殊的CSS，但是我没有运气。有什么想法吗？

Here's the code: 这是代码：

     <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="pantastic.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Questrial|Lobster|Open+Sans:300,400|Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/jquery.slideto.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){ 

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

        $('.toplogo').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

        $('.firstscroll').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });

        $('.secondscroll').click(function(){
            $("html, body").animate({ scrollTop: 500 }, 600);
            return false;
        });

        $('.thirdscroll').click(function(){
            $("html, body").animate({ scrollTop: 1450 }, 600);
            return false;
        });

        $('.fourthscroll').click(function(){
            $("html, body").animate({ scrollTop: 2740 }, 600);
            return false;
        });

    });




    </script>  
  </head>

  <body data-spy="scroll" data-target=".nav nav-pills">

     <div class="navbox">
      <div class="container">
        <div class="row">
          <div class="span5">
        <a href="#"><img class="toplogo" src="navlogo.png" alt="logo"/></a>
        </div>
        <div class="span10 offset5">
        <div class="navbuttons">
        <ul class="nav nav-pills custom">
        <li class="active firstscroll">
            <a href="#1">Home</a>
        </li>
         <li class="disabled secondscroll"><a href="#secondunit">What is Pantastic?</a></li>
         <li class="disabled thirdscroll"><a href="#3">About Us</a></li>
         <li class="disabled fourthscroll"><a href="#4">FAQ</a></li>
         <li class="disabled"><a href="#modal" data-toggle="modal"><img src="Price_Button.png" alt="Order Now" onmouseover="this.src='Price_Buttonhover.png'" onmouseout="this.src='Price_Button.png'"/></a></li>
       </ul>
       </div>
      </div>
      </div>
    </div>
  </div>

   <div class="herounit">
    <div class="container">

          <h1> Introducing Pantastic! </h1>


      <div class="row">
        <h4> Pantastic is the easiest way to bring your iPhone panoramas to life! Simply send us your panorama, and we will print, matte, and ship it right to your doorstep. </h4>
      </div>
        <div id="secondunit">
      <div class="row">
          <img src="pricetag2.png" alt="pricetag">
    </div>
   </div>
   </div>
 </div>

Answer 1

I know this question is dated but I had this issue today and wanted to help those in future need who find this question. 我知道这个问题已经过时，但是我今天遇到了这个问题，想帮助那些将来有需要的人找到这个问题。

Make sure the data-target attribute is set to the PARENT element (id/class) of the navigation. 确保将data-target属性设置为导航的PARENT元素（id / class）。 I had similar issue when using jQuery plugin animatescroll. 使用jQuery插件animatescroll时遇到类似的问题。 Also the BootStrap documentation states.... 此外，BootStrap文档中还说明了...。

Resolvable ID targets required 需要可解析的ID目标

Navbar links must have resolvable id targets. 导航栏链接必须具有可解析的ID目标。 For example, a home must correspond to something in the DOM like . 例如，房屋必须与DOM中的某物相对应，例如。

Resolvable ID targets required per BS documentation BS文档要求的可解析ID目标

Answer 2

Instead of this: 代替这个：

<body data-spy="scroll" data-target=".nav nav-pills">

Use this: 用这个：

<body data-spy="scroll" data-target=".navbuttons">

For one, I'm not sure that you can target two classes, I believe it was made to take only one target element and above you are referencing on target in two ways. 首先，我不确定您可以同时针对两个类，我相信它只采用了一个目标元素，而在上面，您以两种方式对目标进行了引用。 Plus its nt the right target it should be the parent, but if you were ever to reference one single element by two classnames you would need to reference it something like this: 加上它的nt正确的目标，它应该是父对象，但是如果您曾经用两个类名引用一个元素，则需要像这样引用它：

<body data-spy="scroll" data-target=".nav.nav-pills">

Twitter bootstrap scrollspy不适用于导航丸和平滑滚动

问题描述

2 个解决方案

解决方案1
0 2014-01-05 23:31:34

解决方案2
0 2014-08-02 23:06:04

Twitter bootstrap scrollspy不适用于导航丸和平滑滚动

问题描述

2 个解决方案

解决方案1 0 2014-01-05 23:31:34

解决方案2 0 2014-08-02 23:06:04

解决方案1
0 2014-01-05 23:31:34

解决方案2
0 2014-08-02 23:06:04