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.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    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;
    }