bootstrap scrollspy bug when resizing browser

Question

Hello Stackoverflow bootstrappers!

I don't see that this question has been asked before, and I am really interested to see the outcome.

How to duplicate the bug:

1. Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
2. Resize the page down to a tablet
3. Use the navbar

(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.

NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.

Thank you, looking forward to your responses.

Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.

The only Javascript I have on my page is the following:

function close_toggle() 
{
    if ($(window).width() <= 768) 
    {
        $('.nav a').on('click', function() {
                $(".navbar-toggle").click();
        });
    } 
    else 
    {
        $('.nav a').off('click');
    }
}

close_toggle();

$(window).resize(close_toggle);

The code above closes the toggle after a selection is made in mobile.

if ($(window).width() <= 768) 
{
    var offset = 75;
} 
else 
{
    var offset = 90;
}

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

The code above (based on screensize) will offset the scrollspy

Edit #2

The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.

Help is much appreciated.

Answer 1

Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.

Answer 2

To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.

So the solution looks like this:

var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
   $(element)
   .scrollTop(0)
   .scrollspy(‘refresh’)
   .scrollTop(cacheScrolltop);
};