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
Post a Comment