Twitter的引導scrollspy不與導航藥丸的工作，我用引導的導航丸作爲我的頂部導航欄中，平滑滾動

，我已經使用了一段代碼被點擊一丸當滾動到頁面上的某一點。現在我試圖讓scrollspy工作，所以類避孕藥會從「積極」到「禁用」（我爲「已禁用」類特殊的CSS設置，但我有沒有運氣。任何想法改變？Twitter的引導scrollspy不與導航藥丸的工作，我用引導的導航丸作爲我的頂部導航欄中，平滑滾動

下面的代碼：

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

來源

2012-12-11 user1896214

我知道這個問題是過時，但我今天有這個問題，希望能幫助那些在未來需要誰找到這個問題的

確保數據-target屬性。被設置爲導航的父元素（ID /類）。我使用jQuery插件animatescroll時也有類似的問題。同時引導文檔狀態....

需要可解析的ID目標

導航欄鏈接必須具有可解析的ID目標。例如，一個家庭必須對應於DOM中的某些東西。

Resolvable ID targets required per BS documentation

來源

2014-01-05 23:31:34

我scrollspy仍然不工作，但我已經將數據目標設置爲父級，並且所有內容都有可解析的目標 - 您是否介意將代碼發佈到某處？ –

@JessicaYang您可以在這裏查看我的代碼：http://thomaskbird.diverseevolution.com/resume其仍在建設中，但你可以看到滾動間諜的工作與我的代碼特定的div –

取而代之的是：

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

使用此：

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

原因之一，我不知道，你可以針對兩個班，我相信這是由只採取一個目標元素，而以上則以兩種方式引用目標。加上其NT正確的目標應該是家長，但如果你是有史以來由兩個類名來引用一個單一的元素，你將需要引用它是這樣的：

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

來源

2014-08-02 23:06:04

Twitter的引導scrollspy不與導航藥丸的工作，我用引導的導航丸作爲我的頂部導航欄中，平滑滾動

回答

相關問題