'I want the logo to appear animatedly when the navbar becomes sticky [closed]

https://weartuality.com/

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?

javascripthtmlcss


Solution 1:[1]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions