scrollspy on the navbar

[esseti]

What about having the scrollspy from bootstrap enabled for the navbar? in this way the navbar is aligned with the content of the page.

http://getbootstrap.com/javascript/#scrollspy

I'm trying to make it working, but i've some problems right now, if someone already did it pls let me know

[esseti]

I made it working by editing the jade and other files, if someone wants to get it working

index.jade add the body data and the script at the bottom

body(data-spy='scroll',data-target='#navbar-example')
...
script(src="///ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js")
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js")

mixin.jade add id to nav and class nav to collapse-content

nav(id='navbar-example')
...
 .collapse-content.nav

Then, add in a css that you reference (or in the less) the background for active class

nav ul li.active{
    background-color: rgb(206, 229, 242);
}

Add to scripts.js this will move the navbar to the correct position.

NOTE: if item is collapsed this does not work much, someone shold extend the code to un-collapse the nav item when there's an active li inside it.

$('#navbar-example').on('activate.bs.scrollspy', function () {
  var active=$("li.active");
  var group = active.parent().parent().parent()
  $('nav').scrollTop(group[0].offsetTop);
})

[tucq88]

@esseti Could you tell me how to use your custom script when making a build ?