jquery - Bootstrap scrollspy won't work -
i'm trying implement bootstrap scrollspy on website i'm working on no matter do, can't seem work (or anything matter).
the website can viewed @ http://thecreativecompany.stage.webcomm.com.au/
here's javascript:
$(document).ready(function () { var offset_height = $("nav").height(); $('#nav-wrapper').height(offset_height); $("nav").affix({ offset: $("nav").position() }); $('body').scrollspy({ target: '#nav-menu', offset: offset_height }); $('#menu li a').click(function (event) { var scrollpos = $('body').find($(this).attr('href')).offset().top - (offset_height - 1); $('body,html').animate({ scrolltop: scrollpos }, 500); return false; }); });
i believe you're missing .nav
class in menu. docs:
then add data-target attribute id or class of parent element of bootstrap .nav component.
so add class menu <ul>
:
<div id="nav-menu"> <ul id="menu" class="nav"> <li><a href="#header">home</a></li> <li><a href="#work">work</a></li> <li><a href="#about">about</a></li> </ul> </div>
also, result you'll scrollspy plugin .active
class being added list items, i'm assuming you'll want add rule 1 css go current styles:
#menu li.active:after { height: 6px; }
Comments
Post a Comment