2

I'm using Twitter Bootstrap 3.0, using the ScrollSpy plugin to activate my "nav" links as I scroll down. Now I want to automatically update the URL in the address bar (using window.history.pushstate) in response to the ScrollSpy event "activate.bs.scrollspy".

How can I identify the "nav" element that ScrollSpy has activated for me?

My code looks something like this.

<body data-spy="scroll" data-target="#primarynavbar">
    <div id="primarynavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
...
        <li><a href="#contact">Contact Us</a></li>
...
...
    <div id="contact" />
...
...
    <script>
        $('#primarynavbar').on('activate.bs.scrollspy', function () {
            window.history.pushstate('http://abcd.com#contact')
        });
    </script>
...
Boinst
  • 3,365
  • 2
  • 38
  • 60

1 Answers1

4

I would assume you could look for the active class, and get the child anchors href attribute:

$('#primarynavbar').on('activate.bs.scrollspy', function () {
   var hash = $(this).find("li.active a").attr("href");
   window.history.pushstate('http://abcd.com' + hash);
});
dave
  • 62,300
  • 5
  • 72
  • 93
  • Works like a charm. In case you have a nested menu you would want to use the current submenu item. Here's a pimped version of your selector for that: `var hash = $(this).find("li.active:last a").attr("href");` – kernel Jan 06 '15 at 01:20