Komisches Verhalten bei Positionsberechnung

[Jan-Frederik Stieler]

Hallo,

ich hab hier ein ganz komisches Verhalten.
Ich baue mir ein Sticky-Menü welches unter einem header und banner angeordnert ist und wenn die Scrollposition bei Menü ist bleibt diese stehen.
Nun berechne ich die Position des Menüs mittels der Höhe der vorangegangenen Elemente.

var   headerHeight        = $('#landing_header').height(),
        bannerHeight        = $('#banner').outerHeight(),
        menuposition        = headerHeight + bannerHeight;

        //Stickymenu       
        if($('body').hasClass('has-sticky-menu')){   
            $doc.on('scroll', function() {
                if ($doc.scrollTop() > menuposition) {
                    $('body').addClass('sticky-menu');
                } else {
                    $('body').removeClass('sticky-menu');
                }
            });
        }

Hier fehlen der Position (menuposition) ca 50px.

Wenn ich aber dazwischen ein

console.log(headerHeight, bannerHeight, menuposition);

einfüge wird das richtig berechnet.
Kann mir dieses Verhalten jemand erklären?

Grüße,
Jan

 

[merzi86]

Zu welchen Zeitpunkt wird der Codeteil ausgeführt?
Domready, sofort, ...?

 

[Jan-Frederik Stieler]

Hi,
das wird nach document ready ausgeführt.
Aber ich seh grad das die variablen vor dem domready stehen. Das ist eventuell etwas ungünstig.

Grüße

 

[Polu]

Ist das jetzt geklärt?

 

[Jan-Frederik Stieler]

Hi,
äh nein das tritt immer noch auf. Auch nachdem ich das in das dom ready geschoben habe.
Also ich lass jetzt halt das in die Konsole schreiben und dadurch wird der Wert richtig eingelesen.
Ist zwar eine etwas merkwürdige Lösung aber funktioniert.

Grüße

 

[Quaese]

Hi,

vielleicht reicht es schon, die scroll-Anweisung in ein setTimeout zu packen, um es aus dem Verarbeitungsstack zu nehmen.

window.setTimeout(function () {
  // scroll-Anweisung
}, 1);

Ciao
Quaese