Bootstrap 3 Scrollspy - Menü Highlight kommt erst nach scrollen

[lenchenx3]

Hallo zusammen.

Ich bin recht neu in Sachen Javascript (& auch hier im Forum, ich hoffe ich befolge die Regeln ).

Ich habe in Bootstrap einen Onepager erstellt mit einer fixed Navbar top. Diese wird kleiner wenn man nach unten scrollt.

Dann habe ich einen Scrollspy hinzugefügt.
Dadurch, dass ich ja eine fixe Navbar habe, habe ich einen offset wert in JS eingefügt, damit die Überschriften der einzelnen Menüpunkte auch zu sehen sind und nicht unter der navbar verschwinden.

Jetzt habe ich aber folgendes Problem:
Wenn ich auf einen Menüpunkt klicke, springt die Seite zwar zur richtigen Überschrift, aber in der Navigation wird noch der vorherige Menüpunkt hervorgehoben (hintergrundfarbe ändert sich). Erst wenn ich eini wenig runter scrolle, wird der richtige Menüpunkt hervorgehoben.
Ich vermute, dass das etwas mit dem Offset zu tun hat.
Jetzt habe ich folgenden Code (Ich weiß nicht ob nur der JS Teil dafür reicht?) :

var offset = 80;

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

$('[data-spy="scroll"]').each(function () {
    var $spy = $(this).scrollspy('refresh')
})

Meine Frage ist nun, wie bekomme ich es hin, dass mein Menüpunkt auch an der Stelle gehilight wird, sobald ich ihn anklicke und er zur richtigen Stelle springt?

Vielen Dank für jegliche Hilfe und Tipps !

 

[kkapsner]

Welches scrollspy Plugin verwendest du denn?
Steht dazu eventuell etwas in der Dokumentation?

 

[lenchenx3]

Ich benutzte von Bootstrap affix. Ich habe es da dann auch schon mit data-offset versucht, aber so ganz genau ist es trotzdem nicht

 

[kkapsner]

Zeig' doch mal einen Testlink, wo wir uns das live ansehen können.