При удалении класса, стили этого класса все ровно применяются

[Zaken]

В общем такая проблема, есть объект, к которому добавляется класс, а потом удаляется класс, но стили должны применяться не сразу из за transition, из за чего даже после удаления класса navbarfixed у объекта остается стиль top: -60px. Помогите исправить!
.navbar{
position: absolute;
z-index: 101;
width: 100%;
height: 60px;
top:0px;
background-color:#133268FF;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.navbarfixed{
position: fixed;
top: -60px;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}

var y;
window.onmousemove = function (event) {
event = event || window.event;
y= event.screenY;
}
setInterval(function(){
if(y<130){
$('.navbar').addClass('navbarfixed');
$('.navbarfixed').attr('style', 'top:0px');

}else{
$('.navbarfixed').attr('style', 'top:-60px');
$('.navbar').removeClass('navbarfixed');

}
},200)

[рони]

Zaken,
зачем нужен setInterval? попробуйте никогда не использовать этот метод.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:


... минимальный код страницы с вашей проблемой


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Malleys]

Zaken, всё намного проще...

<nav class="navbar"></nav>

<style>

body { margin: 0; }

.navbar {
position: fixed;
z-index: 101;
width: 100%;
height: 60px;
transform: translateY(-100%);
background-color: #133268;
transition: 0.2s ease-in-out;
}
.navbar::after {
content: "";
height: 100%;
width: 100%;
position: fixed;
transform: translateY(100%);
transition: inherit;
left: 0;
top: 0;
z-index: -1;
}
.navbar:hover,
.navbar:hover::after {
transform: translateY(0%);
}

</style>