Auf "Sticky-Modus" prüfen

Thema wurde von alexb1995, 2. Februar 2018 erstellt.

  1. alexb1995
    alexb1995 Erfahrener Benutzer
    Registriert seit:
    1. Mai 2017
    Beiträge:
    78
    Danke erhalten:
    1
    Danke vergeben:
    34
    Hallo zusammen,

    gibt es eine Möglichkeit zu überprüfen ob wir uns im "Sticky-Mode" befinden? Also der Header komprimiert ist? Ich würde gerne den Warenkorb ausblenden wenn der Kunde nach unten scrollt.

    Vielen Dank im voraus!
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Du musst ein Stück nach unten Scrollen, normalerweise sieht man das daran, dass die Leiste ganz oben (Login, Merkzettel...) weg ist. Wenn Du die auch fixiert hast, wird es schwieriger.
     
  3. alexb1995
    alexb1995 Erfahrener Benutzer
    Registriert seit:
    1. Mai 2017
    Beiträge:
    78
    Danke erhalten:
    1
    Danke vergeben:
    34
    Ja genau. Ich würde nun gerne wissen ob es technisch möglich ist diesen Zustand abzufragen. Ob irgendeine Variable gesetzt wird wenn man im Sticky Modus ist o.ä.
     
  4. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Das wird per JavaScript im Header gesetzt. Dieser bekommt dann eine zusätzliche Klasse:

    Code:
    header#header.sticky {
    
    }
    Wäre das CSS um den Header im Sticky-Zustand anzusprechen
     
  5. alexb1995
    alexb1995 Erfahrener Benutzer
    Registriert seit:
    1. Mai 2017
    Beiträge:
    78
    Danke erhalten:
    1
    Danke vergeben:
    34
    Okay perfekt, danke. Wäre es sinnvoll dann per JavaScript onScroll abzufragen ob die Klasse gesetzt ist oder nicht? Oder würde sich das sehr negativ auf die Performance auswirken?
     
  6. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Ob das sinnvoll ist weiß ich nicht, da ich nicht genau weiß was du vorhast. Wenn du nur den Warenkorb ausblenden willst, kannst du da denke ich komplett auf JS verzichten und einfach im StyleEdit unter Eigenes CSS folgendes einfügen:

    Code:
    header#header.sticky #cart-container {
        display: none;
    }