Hallo Gemeinde
ich versuche grade ein Detailseiten-Template so umzubauen, dass die Buybox (Titel, Warenkorb-Btn, etc.) rechts / von oben fixiert bleibt (was auch mit position: fixed geht), die Bilderbox links daneben scrollt aber weg.
Das soll solange passieren, bis der Cross-Selling-Block und der Footer kommen. Dann soll die Buybox wieder mitscrollen, weil es sonst ja überlappt mit Footer usw…
Mit position: fixed kann ich den Block product-detail-buy fixieren, die Produktbilder links davon scrollen schön, wie es soll.
Wenn ich dann soweit gescrollt habe, dass z.B. der Footer oder das Karussell mit den Empfehlungen kommt, soll sich das natürlich nicht mit der Buybox überlappen.
Also hab ich mir das CSS3 Feature sticky angesehen.
Leider „greift“ das nicht.
Das klappt mit fixed, mit den genannten Einschränkungen (fixed bis zum Ende…)
.product-detail-buy {
position: fixed;
left: 50vw;
top: 245px;
padding-right: 0px;
padding-left: 155px;
}
Das selbige mit sticky scrollt einfach wie normal…
.product-detail-buy {
position: -webkit-sticky;
position: sticky;
top: 245px;
padding-right: 0px;
padding-left: 155px;
}
Ich habe überprüft, ob der overflow des parent falsch gesetzt ist. Das nein, aber das parent soll eine höhe haben, das erkenn ich nicht, und darf auch keine Flexbox sein, was ich auch nicht auslesen kann.
Ich hatte auch temporär noch einen div um den „.product-detail-buy“-div drumrumgebaut, damit der eine Höhe bekommen kann, aber das hat auch nichts geändert.
Als Backgroundinfo: Ich habe als Basis das Ruby Theme von 8mylez und damit arbeite ich, sozusagen.
Im Prinzip soll es so funktionieren, ungefähr wie hier:
Und mein Zwischenstand wäre aktuell z.b. der hier:
Wie kann ich das lösen?
Ich wäre für jegliche Hilfe dankbar!
Danke und viele Grüße
Tom
