# Sticky Buy Box auf der Detailseite in einem bestimmten Scroll-Bereich

**URL:** <https://forum.shopware.com/t/sticky-buy-box-auf-der-detailseite-in-einem-bestimmten-scroll-bereich/97174>\
**Category:** Programmierung\
**Created:** [18. November 2022 um 15:06 UTC](https://forum.shopware.com/t/sticky-buy-box-auf-der-detailseite-in-einem-bestimmten-scroll-bereich/97174 "2022-11-18T15:06:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![i47](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/i47/32/13902_2.png) [@i47](https://forum.shopware.com/u/i47)\
**Post date:** [18. November 2022 um 15:06 UTC](https://forum.shopware.com/t/sticky-buy-box-auf-der-detailseite-in-einem-bestimmten-scroll-bereich/97174/1 "2022-11-18T15:06:01Z")

</div>

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…)

```auto
.product-detail-buy {
    position: fixed;
    left: 50vw;    
    top: 245px;
    padding-right: 0px;
    padding-left: 155px;
}

```

Das selbige mit **sticky** scrollt einfach wie normal…

```auto
.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:

> **[Wollpullover mit V-Ausschnitt - Indigo meliert](https://www.acnestudios.com/de/de/wool-v-neck-sweater-indigo-melange/C60048-DC8.html?cgid=woman-face-knitwear)**

Und mein Zwischenstand wäre aktuell z.b. der hier:

> **[Stella Hose | 36 | 20-106-F58-36](https://www.giuliaandromeo.com/staging/Stella-Hose/20-106-F58-36)**
>
> Wir lieben diese Hose mit Gummizug, Baumwollbündchen und den breiten seitlichen Streifen in veganem Leder, Samt oder Satin, die zu den Key Pieces der Kollektion gehört. Der Look variiert, wie immer bei Giulia & Romeo, durch die verschiedenen...

Wie kann ich das lösen?  
Ich wäre für jegliche Hilfe dankbar!

Danke und viele Grüße  
Tom

---

<div class="post-metadata">

**Author:** ![i47](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/i47/32/13902_2.png) [@i47](https://forum.shopware.com/u/i47)\
**Post date:** [21. November 2022 um 10:22 UTC](https://forum.shopware.com/t/sticky-buy-box-auf-der-detailseite-in-einem-bestimmten-scroll-bereich/97174/2 "2022-11-21T10:22:31Z")

</div>

dann hab ichs gelöst bekommen… 🙂

Ich hab um den sticky-container noch einen div gesetz, der die col-lg-6 Klasse hat, nun funktioniert es, dass mein div sticky agiert.