Twitter bootstrap scrollspy - disable on smooth scroll?

Question

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?

Brotherton

Have you tried removing the data-spy attribute temporarily (assuming you are using data-)? – Elga

I'm using javascript to activate it – Brotherton

In that case, try setting a class as data-target, remove the class as the scrolling animation is running, and re-insert the class after animation is done? $('body').scrollspy({ target: '.spy-active' }); – Elga

that works like a charm.. make an answer of it and Ill mark it – Brotherton

Answer 1

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.

Elga

The issue is when reactivating (readding the class), scrollSpy does not refresh the current active class. – Thickwitted

@dude, you can re-enable the class by doing something with your .animate's event in the complete callback with something like: complete: function() { $("#nav").addClass("active-spy"); $(event.target.parentNode).addClass("active"); }. Here's a fiddle: jsfiddle.net/o92wrpg8/2 – Mackle

Answer 2

add the following to the top of your local javascript...

$.fn.scrollspy.Constructor.prototype.destroy = function(){
    this.$element.off('scroll.bs.scroll-spy.data-api');
    this.$body.removeData('bs.scrollspy');
    return this.$body;
}

Jenifferjenilee

Could you explain how this works, and in particular how unhooking only the scroll.bs.scroll-spy.data-api event (which I have never heard of) automagically unhooks all the other scrollspy events too? – Maximin

By perusing the actual ScrollSpy plugin code at link You can see that there is only one event attached to the scrollspy element. the 'scroll.bs.scroll-spy.data-api' event. – Jenifferjenilee