You see the black navbar on that site. There is no logo on that black navbar, but when it becomes sticky, the logo appears. How can I do this using html css javascript?
Listen for the scroll event and show/hide the logo if a certain Y scroll position is reached.
const logoElement = document.querySelector(".logo"); // <--- update this selector
const checkLogo = () => {
if (window.scrollY > 100) {// <-- your non-sticky nav's height here
logoElement.style.setProperty("transform", "scale(1)");
} else {
logoElement.style.setProperty("transform", "scale(0)");
}
}
checkLogo();
window.addEventListener("scroll", checkLogo);
CSS:
.my-logo {
transform: scale(0);
transition: transform .3s;
}