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.

<figcaption> Beschriftung

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

PHP - Ermittlung des Plurals

JavaScript - BBCode konvertieren oder entfernen

MySQL - Anzahl der Datensätze einer Spalte

Fehlermeldungen
Wird eine Webseite nicht gefunden, etwa weil in den Suchmaschinen ein toter Link enthalten ist, gibt es eine Fehlermeldung, die weder optisch noch inhaltlich attraktiv ist. Eine typische Fehlermeldung lautet: 404 - File not found.

Eine selbst gestaltete Fehler-Weiterleitungsseite leitet den Besucher sicher zum Angebot der Webseite.