Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2020, 18:57
Новичок на форуме
Отправить личное сообщение для Zaken Посмотреть профиль Найти все сообщения от Zaken
 
Регистрация: 22.09.2019
Сообщений: 2

При удалении класса, стили этого класса все ровно применяются
В общем такая проблема, есть объект, к которому добавляется класс, а потом удаляется класс, но стили должны применяться не сразу из за 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)
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2020, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,539

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2020, 22:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,442

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 16:17
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37