Zwei verschiedene Logos benutzen bei einer Sticky Navbar

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Guten morgen liebe Freunde..

Probiere jetzt da schon eine zeitlang rum bei meiner Homepage
Ich habe eine sticky navbar eingebaut welche den Style verändert sobald man runter scrolled.
Nur wird dann mein Logo was default angezeigt wird einfach übernommen, das Problem ist das es quasi unsichtbar wird dadurch..

Ich habe jetzt ein zweites Logo angefertigt bzw. das gleiche nur in komplett schwarz und möchte das dieses angezeigt wird sobald man scrollt und sich die Navbar verändert.

Hat jemand Tipps wie ich das bewerkstelligen kann bzw kann mir helfen ? Wäre sehr nett von euch !
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.384
142
63
39
Minden
sebastian1012.bplaced.net
Da gebe es mehrere Möglichkeiten.
Mit JS den die src Attribute zu ändern.
Oder als Background -image einsetzen und über die Klasse ein anderes Bild anzuzeigen.
Oder 2 Bilder als <img einbinden und mit deinen vorhandenen Code die Bilder ein und ausblenden.
Da du mit JS schon eine Klasse erstellst, brauch man da auch nicht viel dran ändern.
 
  • Like
Reaktionen: NewbieYikes

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Vielen Dank für die schnelle Hilfe :) Könntest du evtl. noch kurz erklären was du in der style.css gemacht hast? bzw warum
 

basti1012

Senior HTML'ler
26 November 2017
1.384
142
63
39
Minden
sebastian1012.bplaced.net
Beim html habe ich beide Bilder eingefügt
HTML:
        <img id="bild1" src="https://www.designifyr.com/pictures/logo.png" alt="Logo">
        <img id="bild2" src="https://www.html.de/styles/uix/images/html-large.png?a=3" alt="Logo">
und bei der Css brauch man nur das hinzufügen
CSS:
.sticky #bild1,#bild2{
  display:none;
}
.sticky #bild2,#bild1{
  display:block;
}
Eigentlich sollte die Css selbsterklärend sein.
Beim start der Seite hatt dein Header noch keine Klasse und deswegen wird BILD1 eingeblendet und BILD2 ausgeblendet.
CSS:
#bild2{
  display:none;
}
#bild1{
  display:block;
}
Sobald du scrollst ,bekommt dein Header die Klasse sticky und dann greift die vorherige CSS nicht mehr .Die CSS
CSS:
.sticky #bild1{
  display:none;
}
.sticky #bild2{
  display:block;
}
blendet dann BILD1 aus und BILD2 ein.

Wie schon gesagt, man könnte auch noch andere Technicken anwenden, falls die nicht das gewünschte Ergebniss bringt.
 
  • Like
Reaktionen: NewbieYikes
Werbung: