gelöst Anderes Logo wenn Header sticky wird?

Thema wurde von Anonymous, 5. Juli 2022 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. November 2019
    Beiträge:
    130
    Danke erhalten:
    25
    Danke vergeben:
    68
    #1 Anonymous, 5. Juli 2022
    Es ist ja leider nicht möglich, für den Sticky Status des Header ein anderes Logo zu hinterlegen.
    Gibt es dennoch eine Möglichkeit, dies zu realisieren?

    Grüße
     
  2. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    42
    #2 Frankenwald Hanf-Shop, 5. Juli 2022
    Zuletzt bearbeitet: 5. Juli 2022
    Also mit..
    Code:
    document.querySelector("#header").classList.contains('sticky')
    ..lässt sich selektieren ob der Header die Klasse 'sticky' beinhaltet.

    Code:
    if(document.querySelector("#header").classList.contains('sticky')) {
alert('header is sticky');
// hier 'könnte' man ansetzen
}
    p.s
    Code:
    if(document.querySelector("#header").classList.contains('sticky')) {
document.querySelector('#main-header-logo').style.display = 'none';
} else { document.querySelector('#main-header-logo').style.display = 'block';
}
    Ja, das würde funktionieren wenn man jetzt statt dem 'main-header-logo' ein 'sticky-header-logo' definiert und das anstatt dem 'main-header-logo' anzeigt.
     
  3. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.669
    Danke erhalten:
    1.263
    Danke vergeben:
    300
    #3 Anonymous, 5. Juli 2022
    @ManuelHudec Das geht mit etwas CSS:

    Code:
    .sticky .navbar-brand img {
  display: none;
  }

.sticky .navbar-brand a::after {
  content: '';
  height: 100%;
  background-position: left;
  background-repeat: no-repeat;
  background-image: url('images/meinStickyLogo.png');
  display: block;
  }
    @Frankenwald Hanf-Shop Das JavaScript funktioniert nicht, weil es nur beim ersten Aufruf der Seite einmal ausgeführt wird. Es müsste aber jedes Mal beim Scrollen ausgeführt werden und dafür brauchst du ein Event. Das ist also mit JavaScript schwieriger als mit CSS
     
  4. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    71
    Danke erhalten:
    14
    Danke vergeben:
    42
    #4 Frankenwald Hanf-Shop, 5. Juli 2022
    Dass man dafür ein Event braucht, ist klar.

    Dein CSS ist natürlich eleganter und leicht umzusetzen.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. November 2019
    Beiträge:
    130
    Danke erhalten:
    25
    Danke vergeben:
    68
    #5 Anonymous, 6. Juli 2022

    Vielen Dank für den Input. Hat so leider nicht geklappt.
    Habe es etwas umschreiben müssen, aber nun funzt es bei mir :)
    Kann von meiner Seite aus als gelöst markiert werden.

    Grüße

    Code:
    #header.sticky .navbar-brand img {
  display: none;
  }

#header.sticky a.navbar-brand:after {
    content: '';
    background-position: left;
    background-repeat: no-repeat;
    background-image: url(images/logos/navlogo-sticky.png);
    background-size: cover;
    display: block;
    width: 64px;
    height: 64px;
}