Menüboxen auf Artikelseite fixieren

Thema wurde von gx2.2, 17. August 2022 erstellt.

  1. gx2.2

    gx2.2 Mitglied

    Registriert seit:
    25. Januar 2017
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo zusammen,

    ich blende die Menüboxen auch auf der Artikelseite ein. Jedoch möchte ich dass die Boxen dort in der Desktop- & Tabletansicht fixiert sind, also sich immer im sichtbaren Bereich befinden wenn in der Artikelbeschreibung gescrollt wird.

    Leider habe ich über die Suche nichts passendes gefunden. Per CSS konnte ich es auch nicht lösen. Evtl. könnt Ihr mir einen Rat geben.

    Vielen Dank schon jetzt für eure Hilfe.

    Link zur Seite:
    https://www.allergiker-shop-alfda.d...gegen-alle-gaengigen-Raumluftbelastungen.html
     

    Anhänge:

  2. gx2.2

    gx2.2 Mitglied

    Registriert seit:
    25. Januar 2017
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    9
    @Devil
    Vielen Dank, leider funktioniert es nicht.
    Füge ich Ihren Code testweise über die Entwicklertools im Browser ein, bleiben die Boxen im Sichtfeld, wie gewünscht. Füge ich es aber im StyleEditior ins CSS ein, wird es nicht übernommen. Sie laufen weiterhin aus dem Bild.

    Ein ähnliches Problem hatten wir schon mal im Header dass CSS Änderungen im SE nicht übernommen wurden. Wir haben die Änderungen schlussendlich in die _gambio_malibu_header.scss geschrieben, dort funktionierte es dann.

    Wohin müsste ich die Änderungen in diesem Fall packen?
     
  3. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.013
    Danke erhalten:
    319
    Danke vergeben:
    186
    Evtl. muss man es erzwingen...

    Code:
    @media (min-width: 768px)
    #wrapper #left {
        position: fixed !important;
    }
    Ich habe es aber nicht getestet, ob es überhaupt funktioniert...
     
  4. gx2.2

    gx2.2 Mitglied

    Registriert seit:
    25. Januar 2017
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    9
    @FRAGO war leider auch nicht erfolgreich. :(
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wenn Du das ins eigene css einträgst, speicherst Du das dann auch doppelt?
    einmal in dem Eingabefeld und einmal im SE-Menü?

    Bei mir geht das.
    Aber da fehlen ein paar klammern im Code (schön, dass nicht nur ich die vergesse :D)
    Code:
    @media (min-width: 768px){
    #wrapper #left {
        position: fixed;
    }}
    
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    17. Oktober 2018
    Beiträge:
    126
    Danke erhalten:
    72
    Danke vergeben:
    17
    #6 Anonymous, 18. August 2022
    Zuletzt bearbeitet: 18. August 2022
    Also mein Vorschlag wäre folgender:
    Code:
    @media (min-width: 768px) {
      #wrapper #left {
        top: 150px;
        position: sticky;
      }
    }
    Der Wert "sticky" wird nicht von älteren Browsern unterstützt (goodbye IE) und für Safari müsste man das nochmal genau prüfen. Dafür scrollt es am "unteren Ende" wieder schön mit und es wird dann nicht von anderen Elementen wie z.B. Footer überlagert, wenn die "hoch kommen".

    JM2C

    Edit: Für alle, die das evtl. bei sich auch einbauen möchten: top: 150px ist ein individueller Wert für die Höhe des Headers im Shop des TE. Der Wert sollte entsprechend der Höhe des eigenen <header>-Elements angepasst werden.
     
  7. gx2.2

    gx2.2 Mitglied

    Registriert seit:
    25. Januar 2017
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    9
    Vielen herzlichen Dank, mit @Pepe ´s Code und @barbara ´s Ergänzung (zusätzliche Klammern) funktioniert das Ganze wunderbar. Danke an alle für die Hilfe.:)
     
  8. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    937
    Danke erhalten:
    808
    Danke vergeben:
    301
    Sieht ganz gut aus: https://caniuse.com/css-sticky