Nur main-content soll scrollen – Banner, Breadcrumb und Seitenspalte sollen mit sticky positioniert bleiben

    Auf meiner Website nutze ich das Protostar-Template und habe zu oberst auf der Seite an der Position "banner" mein Signet platziert. Ebenfalls auf "banner" und unterhalb des Signet habe ich "Breadcrumb" positioniert, was ja ebenfalls ein Modul ist.


    Wird die Seite gescrollt, bleibt eine evtl. sichtbare rechte Spalte mittels position = sticky immer im Blick, weil sie mit ca. 10px Abstand am oberen Rand der Site stehen bleibt. Wenn nun aber im BlogLayout nicht nur die Beiträge, sondern auch das Signet und Breadcrumb nach oben verschwinden, wirkt dies meiner Ansicht nach irritierend. Test-Website ist hier.


    Ziel ist also: Das Signet, Breadcrumb und eine evtl. vorhandene Seitenspalte sollten mit "sticky" positioniert sein, während nur main-content scrollen darf.


    Da sich die Höhe des Signet mit der Seitenbreite ändert, muss sich die Position von Breadcrumbs und der Seitenspalte auf die Unterkante des Signet beziehen.


    Wie kann ich das am einfachsten verwirklichen?

    Ich ändere mal meine Frage hier, denn ich habe inzwischen bei Screenwidth über 756px die von mir gewünschte "position: sticky" eingebaut.

    Das Signet hat 5px Abstand vom oberen Rand und Breadcrumbs 12%. Beide Module sind mit sticky positioniert.


    Die Schwierigkeit jetzt liegt darin, dass beim Scrollen sich der Main-Content und auch die rechte Spalte unter das Signet und unter die Breadcrumbs schieben.


    Ich benötige also eine CSS-Definition, die den div-Containern "main-content" und "well" die obere Positionierungsgrenze zeigen. Diese Grenze ist die Unterkante des Moduls Breadcrumbs.


    Diese Grenze kann nicht durch einen festen oder prozentualen Pixelwert angegeben werden, da sich die Höhe des Signets teils proportional, teils linear ändert.


    Bin gespannt, ob es noch eine Lösung gibt!

    Nee ich geb's auf... falls nicht hier noch eine Lösung kommt.

    Hab gerade bemerkt, dass der Abstand der Breadcrumbs vom oberen Rand ständig variiert und nicht stabil zu bekommen ist.


    Wer also jetzt noch auf die Muster-Site geht, wird meine Versuche nicht im CSS oder in den gewünschten Funktionen finden können.


    Aber jetzt möchte ich die Breadcrumbs bei schmalen Bildschirmen ausblenden, da sie dort zu viel Platz wegnehmen. Auch dies gelingt mir bisher nicht, weder durch eine CSS-Klasse, die ich im Breadcrumb-Modul unter "Erweitert" einfüge, noch durch direkten Eingriff in die template.css des Protostar-Templates.


    Wie kann ich das hinbekommen?

    Ach ja, die 60px hatte ich lediglich zum Ausprobieren eingesetzt. Manchmal setze ich drastische Werte ein, um eine Wirkung zu provozieren.

    Habe gerade auf 600px geändert und... es tut sich nichts! Unterhalb von 600px müsste ja jetzt eigentlich Breadcrumb verschwinden. Tut's aber nicht.


    Übrigens habe ich die Klasse .breadcrumb-cl im Modul Breadcrumbs unter "erweitert" eingetragen, ja und mit Leerzeichen davor und ohne Punkt. Firefox bestätigt ja auch bei "Element untersuchen", dass diese Klasse korrekt eingebunden ist. Aber sie ist halt nicht wirksam.


    Hast du ne Idee, warum?

    Ich finde es auch etwas ungünstig, dies alles zu fixieren. Du gehst dabei nur auf Deine Monitore aus, wie es bei Dir dargestellt wird. Es gibt aber zig verschiedene, bei denen die Darstellung anders ist.

    Wenn ich die Seite z.B. aufrufe, dann wird die zweite Box auf der rechten Seite nach dem ersten scrollen nur zu 50% angezeigt. OK - Ich kann die Größe bei mir einstellen und sagen - mach die ganze Seite auf 70%, damit ich das rechte komplett lesen kann. Das aber nicht jeder.


    Demzufolge würde ich davon abraten und den rechten Teil mitscollen lassen. Was ok ist, wenn man auf das Menü dauerhaft Zugriff hat - egal an welche Position man sich befindet.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Wow! Das mit dem falschen Ausrufungszeichen ist schon ein Klopper. Da wär ich so nicht drauf gekommen. Herzlichen Dank dir! Hab's heute Mittag korrigiert und jetzt wird Breadcrumbs zuverlässig unterhalb ca. 760px ausgeblendet.


    Ziel meiner ganzen Aktionen mit sticky oder fixed usw. ist, die Aufmerksamkeit des Besuchers zu fokussieren. Deshalb fliegt ja auch bei Anzeige eines vollständigen Beitrags die rechte Spalte raus, sofern sie zuvor angezeigt wurde. Der Beitrag hat damit immer 100% Breite. Und je kleiner die Screenabmessungen sind, desto kostbarer wird der Platz, sodass ich deshalb die Breadcrumbs verschwinden lasse.

    Der MobileMenü-Button bleibt immer sichtbar und ist die einzige Navigation auf der Site.


    LukasHH Danke dir für deinen Hinweis. Ich habe hier nur Testmöglichkeit auf Desktop mit Firefox + Chrome sowie Galaxy-S5 mit Android 7 und ab und zu hab ich Zugriff auf ein Samsung 10"-Tablet, auf iPhone kann ich gar nicht testen. Wenn ich dich recht verstehe, so siehst du Darstellungsfehler der rechten Spalte. Diese Spalte wird im CSS durch die Klasse "aside" definiert und beide Module in der rechten Spalte liegen in dem Container "aside". Folglich müsste sich ein Darstellungsfehler immer auf beide Module zugleich auswirken.

    "Aside" habe ich auf sticky positioniert, sodass die beiden Module bei längerem Scrollen nicht nach oben aus dem Blickfeld verschwinden, sondern nach anfänglichem Scrollen in ca. 10px Abstand vor dem oberen Displayrand stehen bleiben, während sich der Main-Content weiter scrollen lässt.

    Was konkret wird denn da nur zu 50% dargestellt?

    Hallo Clemens,


    was ich meinte zeige ich hier im Screenshot:


    Die untere Box ist nur zu 50% zu sehen. Wenn ich die Seite aufrufe wird erst einmal nur die obere Box angezeigt. Scrolle ich weiter runter funktioniert das mit den Beiträgen. Die rechte Seite scrollt nur soweit mit, bis die erste Box oben angekommen ist. Damit wird die untere Box aber nur zu 50% angezeigt.


    Damit ich die restlichen 50% der Box sehen kann muss ich im Browser die Gesamtdarstellung auf 70% runter setzen.

    Was ich auch gerade bemerkt habe, wenn ich bis ganz ans Ende der Seite scrolle, dann schiebt sich die rechte Seite auch mit hoch. Dazu muss man dann aber wirklich bis an das Ende, wenn der Footer kommt.


    Deswegen würde ich persönlich die rechte Seite nicht fixieren und mitscrollen lassen.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Danke 1

    Ja genau, so wie du es beschreibst, habe ich es auch beabsichtigt. Wenn jemand einen Bildschirm mit geringerer Höhe hat, kommt der von dir beschriebene Effekt zustande. Ich gehe aber davon aus, dass jemand, der den Inhalt des zweiten Moduls in der rechten Spalte zu Ende lesen will, ganz intuitiv versucht, weiter zu scrollen und hat dann auch endlich Erfolg damit.

    Schwierig würde es, wenn auf der Webseite im BlogLayout z.B. 20 Beiträge stehen und dann der Scroll wirklich unzumutbar lang würde.


    Ich bin halt dabei, viel auszuprobieren und an manche Folgen – wie z.B. diese hier – hatte ich nicht gedacht. Die Aufforderung, "Termin vereinbaren?" ist ja das PayOff und sollte möglichst immer präsent sein, solange der Besucher sich noch nicht dazu entschieden hat, einen der Beiträge auszuwählen und zu lesen. Hat er aber diese Entscheidung getroffen, schwuppst der Beitrag auf 100% Breite, weil ich die Entscheidung des Besuchers unterstütze, ungestört und ohne Ablenkung den Beitrag lesen zu können.

    Vielleicht sollte ich mich darauf beschränken, nur ein Modul in die rechte Spalte zu packen und dieses darf dann mit "sticky" positioniert sein? Oder gibt es noch eine andere Lösung?

    Naja gut, wenn das so von Dir gewollt ist, dann ist es ja ok.


    Ich würde es normal mitscrollen lassen. Alternativ auch kürzer fassen (obere und untere Box), so dass nur die Aufmerksamkeit geweckt wird und die Details in einen separaten Beitrag verlinken.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Like 1

    Ich danke dir herzlich für deine Meinung. Für das Mitscrollen lassen der Seitenspalte spricht auch, dass es ein evtl. ungewohnter und irritierender Anblick ist, dass zunächst der gesamte Content beim Scroillen nach oben geht und abrupt und ohne dass für den normalen Besucher eine Ursache erkennbar ist, der Spaltencontent wieder stoppt und sich nur der MainContent weiter bewegt.


    Eine ähnliche Schwierigkeit habe ich auch bei dem Button "zurück zur Übersicht" beobachten können, den ich zunächst ebenfalls als "sticky" so positioniert haben wollte, dass er immer im unteren Bereich des gerade in vollem Umfang angezeigten Beitrag zu sehen ist und per z-index über dem Text liegt.

    Auch hier geht die Überlegung nicht auf, weil bei sehr schmalen Screens der Footer so viel Höhe einnimmt, dass der Button über dem Footer liegen wird. Der aber muss sichtbar bleiben, da er ja den gesetzlichen Hinweis auf Cookies usw. enthält. Wenn die Position von "sticky" sich auf den Container von Main-Content beziehen könnte, wäre es ja gut, aber das lässt die CSS-Definition von sticky nicht zu. Das bezieht sich immer auf den Screen.

    Aktuell hab ich es mit "fixed" definiert, zumal aus unbekanntem Grund an dieser Stelle "sticky" einfach nicht funktionieren will. Der Button ist am Ende des Beitrags definiert. Gut zu sehen hier: https://idcreativ.de/einblicke…ratung-und-psychotherapie

    Aber vielleicht mach ich dafür besser einen neuen Thread auf?