hi erstmal ich hab hier was gesehen: https://www.erpa-web.de/ (die website)
dort gefällt mir das mit der Navigation und wenn man scrollt das das logo etwas kleiner wird und mit kommt.
kann man das in css auch so hinbekommen?
hi erstmal ich hab hier was gesehen: https://www.erpa-web.de/ (die website)
dort gefällt mir das mit der Navigation und wenn man scrollt das das logo etwas kleiner wird und mit kommt.
kann man das in css auch so hinbekommen?
Ja, habe mal etwas getestet.
Geht bestimmt auch andres oder einfacher, aber es funktioniert.
<script data-relocate="true">
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50,
headerEl = document.getElementById('pageHeaderFacade');
if (distanceY > shrinkOn) {
headerEl.classList.add("smaller");
} else {
headerEl.classList.remove("smaller");
}
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>
<script data-relocate="true">
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50,
headerEl = document.getElementById('pageHeaderLogo');
if (distanceY > shrinkOn) {
headerEl.classList.add("smaller");
} else {
headerEl.classList.remove("smaller");
}
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>
Display More
.pageHeaderFacade.smaller > .layoutBoundary {
align-items: center;
padding-bottom: 0px;
padding-top: 0px;
transition: all 0.5s ease 0s;
}
.pageHeaderFacade > .layoutBoundary {
transition: all 0.5s ease 0s;
}
.pageHeaderLogo.smaller > a .pageHeaderLogoLarge {
align-items: center;
width: 140px !important;
height: 20px !important;
transition: all 0.5s ease 0s;
}
.pageHeaderLogo > a .pageHeaderLogoLarge {
transition: all 0.5s ease 0s;
}
.pageHeaderContainer {
position: fixed;
left: 0;
right: 0;
}
.pageNavigation {
margin-top: 170px;
}
Display More
Don’t have an account yet? Register yourself now and be a part of our community!