Guten Abend.
Jetzt ist der Tag bald rum und ich wende mich an die Profis in dieser Runde :-)
Ich habe eine einfache Seite mit Enfold.
Aufbau:
Farbsektion bestehend aus zwei Spalten mit unterschiedlich langem Content.
In der linken Spalte sind Überschrift und Bild.
In der rechten Spalte ist ein längerer Text, der gescrollt wird.
Gewünschte Funktionsweise:
Beim Scrollen soll die linke Spalte am oberen Fensterrand unter dem Navi andocken und warten bis der Content der rechten Spalte durchgerollt ist (sticky). Erst dann darf auch die linke Spalte mit dem Abschluss der rechten Spalte weiter scrollen. Ich habe mir schon diese Seite angeschaut, https://webers-testseite.de/sticky-elements/ Genau das versuche ich zu realisieren.
Aber es funktioniert nicht. :-/ Es dockt nichts an. Was übersehe ich? Hat jemand eine Idee?
Als Zugabe wäre die Option super, wenn man zwei solcher Farbsektionen mit der gewünschten sticky-Spalte untereinander hinbekäme.
Ich danke euch im Voraus für die Tipps und Tricks!
Mulder
Eventuell wird es dir auf dieser Seite deutlicher. https://webers-testseite.de/sticky-sidebar/
Das unmittelbare Elternelement zu dem Sticky Element ( bei Columns in einer Color-Section ist es der entry-content-wrapper ) muss der Flex-Container sein. Und auf deiner Seite muss gelten:
.responsive #top {
overflow-x: visible;
}
#top #wrap_all {
overflow: visible;
}
Da es nur Sinn macht, wenn die Columns nebeneinander liegen, setzt man die Flex Bedingung am besten nur für diesen Fall ein; also für screens die größer sind als der Umbruchpunkt (768px oder 990px)