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.

<abbr> Abkürzung

CSS - Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)

PHP - Datei ab einer gewissen Dateigröße automatisch mit Datum umbenennen

JavaScript - Alle Checkboxen auf einmal auswählen

MySQL - Text in einer Spalte austauschen

Zu viel Animation
Zu viel Animation, zum Beispiel mit animierten Gifs, wirkt unprofessionell und lenkt ab. Jede Seite sollte höchstens ein animiertes Element enthalten, besser man verzichtet ganz darauf. (Alles, was über den Bildschirm hopst und zappelt und blinkt — weg damit! ;- )