Scrollposition merkwürdig

[Jan-Frederik Stieler]

Hallo,

ich habe ein Onepager erstellt bei welchem über Anker zu den Seiten gescrollt wird.
Nun habe ich auch ein Stickymenü im Onepager drinnen und die höhe des Menüs muss dann zu dem Inhalt hinzugefügt werden dies habe ich einfach über ein Padding gelöst.
Eigentlich funktioniert das auch alles super, außer das bei einer Situation die Position des Menüs nicht stimmt. Wenn man direkt von der Startposition auf „Green” drückt scrollt das Menü zu weit nach unten.
Scrolle ich zuerst auf „Yellow“ und dann auf „Green“ stimmt die Position.
Irgendwie werde ich da nicht ganz schlau draus.
Vielleicht versteht ja jemand das Problem?

https://jsbin.com/hufima/edit?html,css,js,output

Grüße

 

[SpiceLab]

Wenn man direkt von der Startposition auf „Green” drückt scrollt das Menü zu weit nach unten.
Scrolle ich zuerst auf „Yellow“ und dann auf „Green“ stimmt die Position.

Das macht bei mir (Win7) keinen Unterschied. Die Scrollposition der Sprungmarke (Anker #green) ist in beiden Fällen identisch.

Und hast Du die Funktionalität des Ganzen mal in Chrome überprüft? Sieht nicht "so dolle" aus.

OT: Musste nun eine gefühlte Ewigkeit (> 30min) warten, die Antwort ins Forum zu stellen, weil der Server zwischenzeitlich seinen Dienst eingestellt hatte.

Fehler: Netzwerk-Zeitüberschreitung

Der Server unter www.tutorials.de braucht zu lange, um eine Antwort zu senden.

- Die Website könnte vorübergehend nicht erreichbar sein, versuchen Sie es bitte später nochmals.

 

[Jan-Frederik Stieler]

Hi,

ich hab das mit Chrome auf OSX geschrieben. Was meinst du mit sieht nicht so dolle aus?
Das Problem welches ich mein von der Scrollposition sieht bei mir so aus.


Grüße

 

[SpiceLab]

Zum Vergleich (v.l.n.r. Firefox & Chrome):

 

[Improof]

Hi,

bei mir tritt das Problem wiederum auch auf:



Chrome 46.0.2490.71 unter Windows 7

Gruß
Daniel


EDIT1:
Sehe gerade, es ist nicht nur bei Green. Immer wenn du ganz nach oben scrollst (oder eben bei Beginn schon oben bist), tritt der Fehler auf. Egal ob Red, Green, Yellow... wenn du dann aber nochmal das gleiche oder etwas anderes klickst, funktionierts. Auch wenn du selbst irgendwo hin scrollst und dann eine der Farben auswählst scheints zu klappen.

EDIT2:
Nach etwas rumprobieren hab ich gemerkt, dass es an deinem Menü liegt. Unter Scrollposition 150 ist es ja kein 'stickymenu'. Und genau da liegt der Fehler: Lässt du dir $(target).offset().top auf der Konsole ausgeben, ist es immer 208 größer, wenn das stickymenu nicht da ist (Egal ob, Red, Green oder Yellow). Ich habs jetzt mal ganz quick and dirty so lösen können:

$('a[href*=#]').on('click', function(scrollEvent) {
        scrollEvent.preventDefault();
        var target = $(this).attr('href');
        var offset = 0;
        if (!$('body').hasClass('stickymenu')) {
          offset = 208;
        }
      
        $('html,body').animate({
            scrollTop: $(target).offset().top - offset
        }, 2000 , function (){location.hash = target;});
    });

Quick and dirty deshalb, weil ich in JavaScript nicht ganz so drin bin und keine Ahnung hab, wie man das eleganter lösen könnte...aber so gehts erstmal
Stellt sich nur noch die Frage, warum es bei SpiceLab funktioniert...?!

 

[SpiceLab]

bei mir tritt das Problem wiederum auch auf:

Anhang anzeigen 64333

Chrome 46.0.2490.71 unter Windows 7

[...]
Stellt sich nur noch die Frage, warum es bei SpiceLab funktioniert...?!

Im Firefox, IE, Opera funktioniert's bei mir.

Nur stellt sich mir die Frage, warum es bei mir im Chome nicht so funktioniert, wie bei Dir (selbe OS- u. Chrome-Version)?

Werde das dann heute Mittag zum dritten Mal testen, wenn ich wieder vor'm heimischen PC sitze.

...und bis dahin tauch' ich nun wieder in die CAD-Planungsarbeiten ab

 

[Improof]

Im Firefox, IE, Opera funktioniert's bei mir.

Habs jetzt auch mal mit anderen Browsern getestet:

Firefox: Scrollt, wie bei Chrome, zu weit, springt dann aber schlagartig an die richtige Position. (Version: 41.0.2)
IE: Selbses Problem, wie mit Firefox. (Version: 11.0.9600, Anzeigemodus "Edge" in DevTools)
Opera: Verhält sich bei mir wie Chrome, also scrollt einfach zu weit und bleibt dann stehen. (Version 32.0)

Gruß
Daniel

 

[SpiceLab]

OK, mein Fehler: hatte in Chrome nicht "Run with JS" oder "Auto-run JS" gewählt