更改導航欄按鈕上滾動，從一個格至下一

我有一個小的HTML頁面，一個導航欄和2個jumbotrons更改導航欄按鈕上滾動，從一個格至下一

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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="#">Play Home</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#" id="HomeButton">Home</a></li> 
       <li><a href="#Campus" id="CampusButton">Campus</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="container" id="Home"> 
    <div class="jumbotron"> 
     <!--Content here--> 
    </div> 
</div> 
<div class="container" id="Campus"> 
    <div class="jumbotron"> 
    <!--Content Here--> 
    </div> 
</div>

的工作狀態如何，我得到的導航欄導航積極從一種模式改變爲另使用JQuery在頁面上滾動？

我曾經嘗試這樣做 -

$("#Home").scroll(function() { 
    console.log("Here"); 
    $(".nav li").removeClass("active"); 
    $("#HomeButton").parent().addClass("active"); 
}); 

$("#Campus").scroll(function() { 
    $(".nav li").removeClass("active"); 
    $("#CampusButton").parent().addClass("active"); 
});

來源

2017-01-29 Prateek Narendra

我想你scrollspy後實際上是。

將此添加到您的身體標記。

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

，它應該工作，有一點要注意的是，導航欄的<a>標籤的href必須相同<div>的ID。

此外，你應該在你的id的所有小寫字母中使用全部小寫字母，我認爲這是很好的習慣。 :)

檢查此鏈接，如果你是在任何額外的信息之後。 http://getbootstrap.com/javascript/#scrollspy

來源

2017-01-29 08:02:43 harryparkdotio

更改導航欄按鈕上滾動，從一個格至下一

回答

相關問題