Search code examples
javascripttwitter-bootstraphtml-liststwitter-bootstrap-3scrollspy

Twitter bootstrap scrollspy - disable on smooth scroll?


We are using the twitter bootstrap scrollspy on a sidebar ul/il list, this works great. We do however also use smooth scrolling when clicking the links in the sidebar. This causes the scrollspy to highlight each and every element that comes into view, as it should in normal cases.

But when the scrolling is triggered by a click on the links in the side nav, the users most likely don't expect the menu to animate as the scrolling occurs. Is there any way to temporarily disable the scrollspy while the animated scroll is running, and then reenable it once scrolling is complete?


Solution

  • By setting a class as the target of scrollspy you can dynamically stop/resume scrollspy operation.

    $('body').scrollspy({ target: '.spy-active' });
    

    Now one will just need to add or remove the .spy-active class on the navigation.