JavaScript - Eine CSS-Klasse hinzufügen, wenn ein Bildlauf durchgeführt wird

Im Beispiel ändert sich die Hintergrundfarbe und die Textfarbe.


<style>

nav {
  
background-color#ADD8E6;
  
color#000000;
  
transitionall 0.4s;
}

.
scrolled {
  
background-color#4682B4;
  
color#FFFFFF;
}
</
style>

<
nav>Navigation</nav>

<
script>
// Eine CSS-Klasse hinzufügen wenn ein Bildlauf durchgeführt wird

let navbar document.querySelector('nav');
window.addEventListener("scroll", () => {
  if (
window.pageYOffset 0) {
    
navbar.classList.add('scrolled');
  } else {
    
navbar.classList.remove('scrolled');
  }
});
</
script>

Siehe auch: Eine Animation ab einer bestimmten Scroll-Position starten

Hintergrundbild ab einer bestimmten Position austauschen


<style>

.
bild {
 
width533px;
 
height400px;
 
marginAuto;
 
box-shadow0px 0px 7px 6px #bbbbbb;
 
borderSolid 1px #909090;
 
background-imageurl("bild1.jpg");
 
transitionall 1s ease-in-out;
}

.
meinBild {
  
background-imageurl("bild2.jpg");
}
</
style>

<
div class="bild"></div>

<
script>
// Hintergrundbild ab einer bestimmten Position austauschen

let bild document.querySelector('.bild');
window.addEventListener("scroll", () => {

  
let pYO Math.ceil(window.pageYOffset);
  
// console.log(pYO); // Position zum testen ausgeben

  
if (pYO >= 600) {
    
bild.classList.add('meinBild');
  }
  else {
   
bild.classList.remove('meinBild');
  }

});
</
script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<legend> Gruppenüberschrift

CSS - Modal-Fenster mit HTML5 und CSS

PHP - Text vertikal ausgeben

JavaScript - HTML-Tabelle als CSV-Datei exportieren

MySQL - Höchstwert einer Tabellenspalte ermitteln

Templates - HP Vorlagen
Templates sind fertige Homepage Vorlagen, die man nur noch mit Inhalt füllen muss. Das ist zwar für Anfänger eine schnelle Lösung, aber möchten Sie das gleiche Design wie auf anderen 97 Webseiten auch? Jede Homepage hat ihren eigenen Touch, eben der Stil, der die Seite einmalig macht.