2

I'm using the Jquery standalaone implementation of Scrollspy. I have a jsfiddle example of my issue here: http://jsfiddle.net/2acyu/66/

The top nav links are highlighted as the page scrolls down through the 3 sections.

Works fine!

My problem is I want to have some hidden elements that can be toggled. When some additional content is shown and one of the sections is expanded it throws out the scrollspy. Try exanding the hidden text and then scrolling down. The link to text 2 is highlighted before this section reaches the top of the page since the offset values of the container div have changed.

The Bootstrap version of scrollSpy has a "refresh" method that can be called when elements in the DOM are added/changed to fix this situation. However the standalone JQuery version of Scrollspy that I'm using doesn't.

Someone here on another site suggests using:

$(window).unbind("scroll");

and then recreate the widget.

But I'm not sure how to implement this fix.

Any help appreciated.

danjothebanjo
  • 71
  • 2
  • 6

1 Answers1

3

I had a situation where I had a fixed size scrollable div, and I wanted the content inside to grow dynamically as the user scrolled down. The key to solving issue was looking at the scrollspy source and figuring out that the min/max settings can be functions, not just static values. So I set the min/max settings to functions that return a value based on the current size of the growing content. This way when the user scrolled, the content would grow and the scrollspy min/max settings would adjust appropriately.

$('.locked-size-container').scrollspy({
  min: function () { 
      // Adjust the 'enter' start position according to the container size
      return ($('.dynamic-size-container').height() / 3);
  },
  max: function () {
    // Adjust the 'enter' end position according to the container size
      return $('.dynamic-size-container').height();
  },
  container: $('.locked-size-container')[0],
  onEnter: function() {          
      console.log('loading new content...');
      ...
  }
});
Jason Sich
  • 148
  • 2
  • 7
  • I tried this but the current version of scrollspy (https://github.com/sxalexander/jquery-scrollspy) does not allow for min/max to accept a function. Did you change yours to do so? – Styledev Jan 31 '14 at 18:32
  • Looking at [line 45](https://github.com/sxalexander/jquery-scrollspy/blob/master/jquery-scrollspy.js#L45) it looks like you can still use a function for min/max. It will pull it from the options, see line 40/41, so my above code should still work although I haven't tried it. The min/max functions should get evaluation on each scroll event. – Jason Sich Feb 02 '14 at 17:01
  • My bad, I was running an outdated version of scrollspy. Thank you. – Styledev Feb 03 '14 at 17:40