Bootstrap ScrollSpy skips section when no more scrollable area

Question

I am having an issue with Bootstrap ScrollSpy in regards to the scrolling position of a selected element. The issue occurs at the bottom of the page, I have multiple relatively short sections of content through out the page. They are collapsed and expand onClick, (so yes, if I choose to have all open then there seem to be no problem) and when I reach the bottom of page before all have been selected by scrollspy it jumps to the last element on nav.

It seems to be a issue with no more scrollable area. (Also adding extra white space padding to kill design is not an option)

I have added scrollspy to body, my body has no height values added, offset has no effect other then starting the highlighted element was to early.

Here is a JSFiddle of my code: http://jsfiddle.net/Abuu/sAUee/

    $( document ).ready(function() {
    $('body').scrollspy({ 'target': '#nav', 'offset': 10 });
});

I have only found one similar question here on So, but it has not been answered: Bootstrap - Scrollspy scrolling skipping second to last section

Thanks in advance.

Answer 1

This occurs when sections aren't large enough to take up the display space, so when a few sections are all on the page at the same time ScrollSpy defaults to the last section. From what I've seen this only happens with the last sections on a page.

If you add a height to each section that takes up the screens real-estate you'll see that it works as it should.