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.

<area> Areal (Verweis-sensitive Grafik)

CSS - Glühende Neon Buchstaben

PHP - Ein Verzeichnis als ZIP-Archiv verpacken

JavaScript - Zeichenkontrolle

MySQL - Text automatisch nach Zeichenanzahl kürzen