JQUERY onscroll Event - performance

[mixmastertobsi]

Hallo,

gibt es eine andere "schnellere" Methode für ein onscroll Event?

$(window).on("scroll touchmove", function(event){

Ich habe auf meiner Seite es so programmiert, dass die Navigation stehen bleibt, wenn gescrollt wird, allerdings "hängt" diese manchmal für einen Bruchteil einer Sekunde.

Beispiel: https://www.slewo.com/schlafzimmer/

[Gunnar Bittersmann]

@@mixmastertobsi

gibt es eine andere "schnellere" Methode für ein onscroll Event?

Ja: kein JavaScript.

“We used my favourite JavaScript technique... which is to delete it and do it in CSS” — Alfredo Lopez

… dass die Navigation stehen bleibt, wenn gescrollt wird

Du suchst position: sticky. ☞ Beispiel

LLAP 🖖

[mixmastertobsi]

Deine Idee wäre super, allerdings passiert auf meiner Seite nichts, wenn ich Sticky einfüge.

Eine Idee?

#sitecontent > div > div:first-child {
    width: 25%;
    padding: 0 1em 0 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

[Rolf B]

Hallo mixmastertobsi,

Stackoverflow meint, dass Flexbox und Sticky nicht gut zusammenpassen täten.

https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox

Aber eine Lösung habe ich auch nicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Stackoverflow meint, dass Flexbox und Sticky nicht gut zusammenpassen täten.

https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox

Aber eine Lösung habe ich auch nicht.

Aber Stackoverflow hat doch die Lösung auf der von dir verlinkten Seite: “align-self: flex-start to the sticky element”

Wenn nicht gar align-items: flex-start für die Flexbox gesetzt ist: sticky and flexbox.

Und mit Grid geht’s auch: im Star-Trek-Universum.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

dein Universum ist unvollständig! Mit den Referenzen von DIS auf die Pike-Episoden von TOS (The Cage/The Menagerie) bin ich ja sowas von begeistert von der 2. Staffel 😀.

Den flex-start hatte ich ausprobiert, bzw. der war sogar schon da. Hat bei mir aber nichts bewirkt (da sind mehrere Flexe geschachtelt).

Rolf

[Gunnar Bittersmann]

@@mixmastertobsi

wenn gescrollt wird

Und wenn man doch einmal auf das scroll-Event lauschen will (nicht in diesem Fall!), sollte man sich die Debounce Function ansehen.

LLAP 🖖