Mam podpięty window.addEventListener
, w którym chcę wywołać funkcję ukrywającą menu jeśli nie ruszam kółkiem myszy a jeśli ruszę to żeby menu się pokazało i za bardzo nie wiem jak wykryć ruszenie kółkiem. Próbowałem z setInterval ale jakoś mi się nie udaje.
0
0
Kod?
0
window.addEventListener('wheel', (e) => {
if (e.isTrusted) {
hiddenMenu();
} else {
navbar.style.visibility = "visible";
}
})
function hiddenMenu() {
setTimeout(() => {
navbar.style.visibility = "hidden";
}, 2000);
}
2
window.addEventListener('wheel', (e) => {
console.log('visible');
//navbar.style.visibility = "visible";
if (e.isTrusted) {
hiddenMenu();
}
})
function hiddenMenu() {
setTimeout(() => {
console.log('hidden');
//navbar.style.visibility = "hidden";
}, 2000);
}
0
Dobra mam 2 pytanie zmieniłem to znikanie na 2 klasy w css (jest troszkę ładniej) :
@keyframes disapperance {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 0; }
}
@-webkit-keyframes disapperance {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 0; }
}
@keyframes apperance {
0% {opacity: 0;}
50% {opacity: 0.5;}
100% {opacity: 1; }
}
@-webkit-keyframes apperance {
0% {opacity: 0;}
50% {opacity: 0.5;}
100% {opacity: 1; }
}
.disapperanceClass {
-webkit-animation: 2s 1 disapperance;
animation: 2s 1 disapperance;
opacity: 0;
}
.apperanceClass {
-webkit-animation: 2s 1 apperance;
animation: 2s 1 apperance;
opacity: 1;
}
function hiddenMenu() {
window.addEventListener('wheel', (e) => {
//navbar.style.visibility = "visible";
// navbar.classList.remove("apperanceClass");
navbar.classList.add("disapperanceClass");
if (e.isTrusted) {
//navbar.classList.remove("disapperanceClass");
navbar.classList.add("apperanceClass");
}
})
}
i teraz tak jak dodam klasę disapperanceClass
to ładnie menu znika ale jak w if
ją usunę a dodam tą 2 to nic nie działa tak jak powinno. Nie mam zielonego pojęcia co robię źle