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;
transition: all 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 {
width: 533px;
height: 400px;
margin: Auto;
box-shadow: 0px 0px 7px 6px #bbbbbb;
border: Solid 1px #909090;
background-image: url("bild1.jpg");
transition: all 1s ease-in-out;
}
.meinBild {
background-image: url("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