Forudsætninger
Sticky header med scroll eksemplet er baseret på følgende:
- CMS: WordPress
- Tema: Hello Elementor
- Plugin: Elementor Pro
Bemærk også
- Header har på øverste niveau fået tildelt en klasse: .minHeaderBS
Denne klasse skal være unik. Dvs. ikke være brugt andre steder på websitet. - Logoet har også fået tildelt en klasse: .mitLogo
Bemærk at denne klasse også skal være unik.
I eksemplet har jeg defineret headeren størrelse (højde) i selve CSS-koden. Definerer du headerens størrelse (højde) direkte i selve elementet, må du regne med, at nedenstående kode ikke virker på grund af CSS standardernes hieraki.
Du kan frit eksperimentere med tallene. Det samme gælder naturligvis klassernes navne.
Tilpas tema
Nedenstående kode er indsat i temaet under “Tilpas” og “Ekstra CSS”.
.mitlogo {
transition: transform 0.3s ease;
}
.mitlogo.smaller {
transform: scale(0.7);
}
.minHeaderBS {
height: 100px;
transition: height 0.3s ease;
}
.minHeaderBS.smaller {
height: 70px !important;
}
Footer element
Nedenstående kode har vi indsat i et “html” element i hjemmesiden footer.
Vi har altså benyttet den indbyggede “header” og “footer” skabelon bygger i Elementor Pro.
<script>
document.addEventListener('DOMContentLoaded', function() {
const logo = document.querySelector('.mitlogo');
const header = document.querySelector('.minHeaderBS');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
if (logo) logo.classList.add('smaller');
if (header) header.classList.add('smaller');
} else {
if (logo) logo.classList.remove('smaller');
if (header) header.classList.remove('smaller');
}
});
});
</script>
CSS (Cascading Style Sheets) er et stylesheet-sprog, der bruges til at beskrive, . Med CSS kan du styre farver, skrifttyper, layout, størrelser og andre visuelle aspekter af en webside.
Her kan du læse mere: