angularjs - Can't get Bootstrap 3's Scrollspy to work -


i trying scrollspy work, not moving page view items in list. using data-toggle instead of href. when click list item firing off of switching active class in developer console, page not move proper item

html

<div class="panel-body">   <div class="row col-sm-7" style="position:fixed; background:white">     <div id="myscrollspy">       <ul  class="nav navbar-nav" style="border:none">         <li class="active"><a data-toggle="tab" data-target="#java-clients-section-1">section one</a></li>         <li><a data-toggle="tab" data-target="#java-clients-section-2">section two</a></li>         <li><a data-toggle="tab" data-target="#java-clients-section-3">section three</a></li>       </ul>     </div>   </div>   <div class="informationdiv"  data-spy="scroll">     <span id='java-clients-section-1'>createchecking</span>     <br />     stuff la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la     <span id='java-clients-section-2'>confirmchecking</span>     <br />     stuff la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la     <span id='java-clients-section-3'>listchecking</span>     <br />     stuff la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la     <br />     la la la la la la la la la la la la la la la la la la la la la la la la   </div> </div> 

css

.informationdiv {   height: 450px;   overflow: scroll;   overflow-x: hidden;   padding-top:50px; } 

your data-spy="scroll" needs in < body > section.

i got working on http://intern-dev.obrary.com/manufacturer. @ example.

i did through js, need 4 things:

1 - tag < body > section appropriately.

<body class="scroll-area" data-spy="scroll"> 

2 - tag navbar appropriately. yours looks good.

3 - add js head. don't see in example. try

<script>$(document).ready(function(){ $(".scroll-area").scrollspy({target: "#navbar-example2"})  });</script> 

4 - ensure accessing bootstrap .js includes scrollspy


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -