본문 바로가기

Development/WebUI FrameWork | BootStrap

[BootStrap 3] ScrollSpy

부트스트랩 스크롤 스파이 엘리먼트에 적용

링크 : http://tutsme-webdesign.info/bootstrap-3-scrollspy/

<body>
<div class="container">
    <nav id="target_nav" class="col-md-3">
        <ul class="nav list-group">
            <li class="list-group-item"><a href="#one">One</a></li>
            <li class="list-group-item"><a href="#two">Two</a></li>
            <li class="list-group-item"><a href="#three">Three</a></li>
            <li class="list-group-item"><a href="#four">Four</a></li>
        </ul>
    </nav>
    <div id="scroll-able" class="col-md-6">
        <section><h4 id="one">One</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="two">Two</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="three">Three</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
        <section><h4 id="four">Four</h4><p>Pellentesque habitant morbi tristique senectus et netus ... metus</p></section>
   </div>
</div>
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
  $('div#scroll-able').scrollspy({ target: '#target_nav' });
</script>
</body>