Sticky Header verschwindet bei window resize

[ByeBye 249712]

Hi,

Okei, also ich habe die Lösung gefunden.
Nach dem Resize wird headerOffset = ScrollPosition gesetzt.
Natürlich verschwindet dann der Header sofort beim scrollen,
da der Wert ScrollPosition sofort < headerOffset wird.
Ich habe das Problem dann gelöst indem ich eine if-Abfrage
eingebaut habe, welche beim Resize headerOffsetResize == scrollPosition prüft.
Ist dies der Fall wird die Windowhöhe ermittelt und zu dem neuen headerOffset, dem
headerOffsetnew, hinzu addiert.
Falls du lust hast kannst du es dir ja hier einmal anschauen.
Vielen Dank für deine Hilfe.

jQuery(document).ready(function() {

var headerOffset = jQuery(".wrapper_header").offset().top;

var scrollPosition = null;

var headerOffsetResize = null;

var WindowSize = null;


jQuery(window).resize(function() {

headerOffsetResize = jQuery(".wrapper_header").offset().top;

if (headerOffsetResize == scrollPosition){
WindowSize = window.innerHeight;
headerOffsetnew = headerOffsetResize - scrollPosition;
headerOffset = headerOffsetnew + WindowSize;
}else{
headerOffset = headerOffsetResize;
}

});


jQuery(window).scroll(function() {

scrollPosition = jQuery(window).scrollTop();


if (scrollPosition >= headerOffset){
jQuery(".wrapper_header").addClass("fixed");
}else{
jQuery(".wrapper_header").removeClass("fixed");
}

});

});

Das einzige Problem was ich jetzt noch habe ist, dass der Google Chrome
die Funktion window.innerHeight nicht interpretieren kann.
Somit funktioniert es in diesem Browser nicht, im Firefox geht es aber.
Hast du da vielleicht eine Idee woran das liegen könnte?

Grüße

 

[ByeBye 249712]

Ich sehe gerade statt

headerOffsetnew = headerOffsetResize - scrollPosition;
headerOffset = headerOffsetnew + WindowSize;

kann es auch einfach

headerOffset = WindowSize;

heißen

 

[ByeBye 249712]

Weiß noch jemand Rat zwecks des Problems dass der google chrome Browser
die Zeile WindowSize = window.innerHeight; nicht interpretieren kann?

 

[Quaese]

Hi,

mir erschließt sich der Zweck der resize-Methode noch immer nicht. Denn mit der nachfolgenden Minimalvariante funktioniert das Handling problemlos.

jQuery(document).ready(function() {
    var wrapperHeader = jQuery(".wrapper_header"),
        headerOffset = wrapperHeader.offset().top,
        $window = jQuery(window),
        scrollPosition;

    jQuery(window).scroll(function() {
        scrollPosition = $window.scrollTop();

        if (scrollPosition >= headerOffset){
            wrapperHeader.addClass("fixed");
        }else{
            wrapperHeader.removeClass("fixed");
        }
    });
});

Vielleicht sehe ich ja das eigentliche Problem nicht oder es tritt in meinem Beispieldokument nicht auf. Für den zweiten Fall wäre es ratsam, wenn du das gesamte Dokument online zur Verfügung stellen könntest. So wäre es wahrscheinlich einfacher zu testen und gezielt zu helfen.

Bei mir funktioniert die innerHeight-Eigenschaft im Chrome tadellos (getestet, indem ich mit F12 die Developer Tools geöffnet und window.innerHeight in die Konsole eingeben habe).

Ciao
Quaese