position:sticky Problem

[mixmastertobsi]

Hallo,

ich versuche auf folgender Seite das Menü links mit Position:sticky zu fixieren, allerdings klappt es nicht.

An was könnte es liegen?

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

#content_menu_box_scroll {
	position: sticky;
	top: 0;
}

Edit Rolf B: Link zum Link gemacht

[wisch]

Hallo,

das von Dir genannte Element, wird nur bei schmalen Fenstern verwendet. Dort funktioniert es auch:

Bei größerer Fensterbreite wird ein anderes Element sichtbar. Das braucht noch eine eigene ID und ebenfalls die Attribute.

Nebenbei: Ist gewollt, dass der Text der Seite darunter durchscheint? Im obigen Beispiel das "ab 249.00 €". Wenn nicht, musst Du noch die Hintergrundfarbe explizit setzen.

Viele Grüße

Wilfried

[Rolf B]

Hallo mixmastertobsi,

diese Seite ist kritisch. Ein Abmahnanwalt wird sich die Finger lecken. Grund: Durch die automatische Erweiterung des Scrollbereichs kommst Du „nie“ auf den Footer und kannst das Impressum nicht aufrufen. Du hast so viele Artikel, dass 168 Seiten gefüllt werden. Ohne eine Suche wird man erst, wenn die alle da sind, das Impressum anklicken können, und den Text zu "Moderne Schlafzimmermöbel für einen erholsamen Schlaf" kann man auch erst dann lesen. Aber wenn man die Suche benutzt, ist der Infotext nicht mehr da. Schade um den schönen Text. Niemand kann ihn lesen.

Denk Dir ein anderes Layout aus, bringe den Impressum-Link nach oben, oder schalte das automatische Nachladen der Listenelemente ab. SO würde ich es als ungeeignet bezeichnen.

Um den Header zu fixieren, könntest Du auch dafür sorgen, dass es einen Seitenrahmen gibt, der eine Höhe von 100vh hat und aus 2 Teilen besteht: Oben der Header, darunter der Container für den Seitenrest. Den Container machst Du scrollbar. Dann hast Du kein Problem mit sticky, und auch kein Problem damit, dass irgendwas durch den Header durchscheint. Einen solchen Rahmen kannst Du per flexbox erschaffen. Du kannst den Rahmen auch 3-teilig machen und einen niedrigen Footer einbauen. Der enthält dann - je nach Viewportbreite, die wichtigsten Links (mindestens das Impressum), und spätestens da findet man dann den vollständigen Footer mit allen Links. Du könntest die wichtigsten Footer-Links auch noch ins Hamburger-Menü bringen.

Rolf

[Rolf B]

Update…

ich sehe gerade: Wenn man das Browserfenster nicht zu hoch macht, ist es einfacher, an den Footer heranzukommen. Aber wenn ich auf meinem 1920x1200 Bildschirm den Browser maximiert öffne, dann ist er unerreichbar.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Durch die automatische Erweiterung des Scrollbereichs kommst Du „nie“ auf den Footer

Modern web design explained … 😈

LLAP 🖖