Интересно, был ли способ сделать переход css, когда div задан определенный класс. Мой лучший пример - это сайт http://ideaware.co/
При прокрутке вниз и заголовок становится фиксированным, он меняет цвет фона и имеет непрозрачность. Действительно приятно выглядеть.
Я работаю над шаблоном, который у меня есть здесь http://www.niviholdings.com/collide/, и что я хочу сделать, когда <nav> фиксируется, я хочу, чтобы <ul> , чтобы переместиться вправо.
Надеюсь, я правильно объясню это.
2 балла, я обнаружил, что может помочь:
Переходы с auto на фиксированное значение могут быть проблемой. В конце концов вы можете попробовать установить margin-left .main-nav-ul на фиксированное значение по умолчанию, а не только на то, чтобы оно было липким.
Второй (и это хакерский). Попробуйте применить класс для .main-nav-ul delayed:
setTimeout(function() {
$('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);
Что вы можете...
document.querySelector('#header').addEventListener('click', function(e) {
e.target.classList.toggle('transition');
})#header {
background: red;
padding: 10px 0;
position: relative;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
left:0;
}
#header.transition {
background: green;
left: 50px;
}<div id="header">Click me to toggle class</div>Убедитесь, что то, что вы хотите сделать, возможно с помощью переходов CSS. Вы можете сделать это, проверив документы W3C.
Добавьте переход и ваш начальный стиль к базовому элементу.
Добавьте класс или состояние, у которого есть стили, которые изменились.
Добавьте механизм для добавления класса (если применимо).
Быстрый пример, скажем, вы хотите анимировать изменение поля на :hover. Вы бы просто сделали это:
element {
margin-left: 10px;
transition: margin-left linear .5s;
}
element:hover {
margin-left: 0;
}