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 es 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 plete?
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 es 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 plete?
Share Improve this question edited Sep 19, 2013 at 9:46 Anshad Vattapoyil 23.5k19 gold badges90 silver badges134 bronze badges asked Sep 19, 2013 at 9:36 Roger JohanssonRoger Johansson 23.2k18 gold badges104 silver badges204 bronze badges 4-
Have you tried removing the
data-spyattribute temporarily (assuming you are usingdata-)? – JofryHS Commented Sep 19, 2013 at 10:48 - I'm using javascript to activate it – Roger Johansson Commented Sep 19, 2013 at 10:54
-
2
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' });– JofryHS Commented Sep 19, 2013 at 11:00 - that works like a charm.. make an answer of it and Ill mark it – Roger Johansson Commented Sep 19, 2013 at 12:53
2 Answers
Reset to default 8By 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.
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;
}