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.