При удалении класса, стили этого класса все ровно применяются
В общем такая проблема, есть объект, к которому добавляется класс, а потом удаляется класс, но стили должны применяться не сразу из за 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 и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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> |
Часовой пояс GMT +3, время: 09:53. |