Demo：使用scrollspy讓畫面更生動

Demo展示頁

作法說明

1.幫body加工

將body加上display: relative，如果還是不行使用的話加上width: 100%與height: 100%。

display: relative;
width: 100%;
height: 100%;

2. 宣告navbar並設定target

使用js宣告target，這次我使用的target是整個navbar，用.navbar-custom來指定之，有需要的話可以調整offset修正navbar的觸發情形。

$(document).ready(function(){
   $("body").scrollspy({
       target: ".navbar-custom",
       offset: 370
   })
});

nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
  <div class="container">
    .
    .
    .

  </div><!-- /.container -->
</nav>

3. 設定個區塊的id，並關聯到導覽列的連結

每個區塊設定id，例如：

<section class="client t-padding" id="clients">
.
.
.
</section>

幫導覽列的連結加上href="#id"

<div id="navbar"class="collapse navbar-collapse navbar-right navbar-main-collapse">
  <ul class="nav navbar-nav ">
    <li class="page-scroll"><a href="#why">why us?</a></li>
    <li class="page-scroll"><a href="#who">who are we?</a></li>
    <li class="page-scroll"><a href="#clients">clients</a></li>
    <li class="page-scroll"><a href="#contact">contact</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

Bonus. 自行撰寫點擊導覽列連結就可以緩緩移動的JS

將li加上.page-scroll的屬性，以便之後選取。

<div id="navbar"class="collapse navbar-collapse navbar-right navbar-main-collapse">
  <ul class="nav navbar-nav ">
    <li class="page-scroll"><a href="#why">why us?</a></li>
    <li class="page-scroll"><a href="#who">who are we?</a></li>
    <li class="page-scroll"><a href="#clients">clients</a></li>
    <li class="page-scroll"><a href="#contact">contact</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

當點擊到連結時，畫面會垂直位移到相對硬的區塊。

$('.page-scroll > a').click(function(){
	var $anchor = $(this);
	$('html, body').stop().animate({
		scrollTop: $($anchor.attr('href')).offset().top-100
	}, 1500, 'easeInOutExpo');
	event.preventDefault();
});

加上CSS的轉場效果，讓效果更漂亮。

.page-scroll{
   -moz-transition-property: -webkit-transform ;
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   transition-duration: 1s;
   -moz-transition-duration: 1s;
 	-webkit-transition-duration: 1s;
 }

參考連結

JavaScript · Bootstrap

How to Create Bootstrap 3 Scrollspy - Tutorial Republic