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

【问题标题】：Twitter bootstrap scrollspy not working with nav-pills and smooth scrollingTwitter bootstrap scrollspy 不适用于导航药丸和平滑滚动
【发布时间】：2012-12-11 23:47:26
【问题描述】：

我使用 Bootstrap 的导航药丸作为我的顶部导航栏，并且当单击药丸时，我使用了一段代码滚动到页面上的某个点。我现在正试图让 scrollspy 工作，这样药丸的类将从“活动”变为“禁用”（我为“禁用”类设置了特殊的 css 设置，但我没有运气。有什么想法吗？

代码如下：

     <!-- 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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我知道这个问题已经过时了，但我今天遇到了这个问题，并希望帮助那些在未来有需要的人找到这个问题。

确保将 data-target 属性设置为导航的 PARENT 元素（id/class）。我在使用 jQuery 插件 animatescroll 时遇到了类似的问题。 BootStrap 文档还指出......

需要可解析的 ID 目标

导航栏链接必须具有可解析的 id 目标。例如，home 必须对应 DOM 中的某些内容，例如 .

Resolvable ID targets required per BS documentation

【讨论】：

我的 scrollspy 仍然无法正常工作，但我已将 data-target 设置为父级，并且所有内容都有一个可解析的目标 - 您介意将您的代码发布到某个地方吗？
@JessicaYang 你可以在这里查看我的代码：thomaskbird.diverseevolution.com/resume 它仍在建设中，但你可以看到滚动间谍使用我的代码在特定的 div 上工作

【解决方案2】：

而不是这个：

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

使用这个：

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

首先，我不确定您是否可以定位两个类，我相信它只采用一个目标元素，并且您以两种方式引用目标元素。加上它的正确目标应该是父级，但如果你曾经通过两个类名引用一个元素，你需要像这样引用它：

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

【讨论】：