С помощью CSS3 можно добиться фиксации объекта в верхней части веб-страницы даже при прокрутке вниз. Будь то текст, изображение, видео или какой-либо другой объект, когда вы хотите, чтобы объект оставался в определенной позиции, несмотря на то, что пользователь перемещался по странице. Есть несколько причин, почему это может быть уместно, и нет необходимости использовать навязчивое всплывающее окно для достижения эффекта.
Высота объекта определяет его положение на странице, но не обеспечивает прокрутку вверх или вниз. Здесь максимальная высота вступает в игру для перехода. Давайте посмотрим на код ниже для списка, который должен переходить с прокруткой. Это не обязательно может быть решением, но это удобный обходной путь в котором все же может дать желаемый эффект.
Первый вариант:
HTML
Код
<div id="nsicreat-eansition">
<a>Наведите меня</a>
<ul id="atunas">
<li>Категорий сайта №1</li>
<li>Категорий сайта №2</li>
<li>Категорий сайта №3</li>
<li>Категорий сайта №4</li>
<li>Категорий сайта №5</li>
</ul>
</div>
CSS
Код
#nsicreat-eansition #atunas {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
background: #f5f5f5;
}
#nsicreat-eansition:hover #atunas {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
Время может быть изменено, как требуется для более плавного перехода. Помните, что этот эффект также может быть достигнут с помощью JavaScript в зависимости от индивидуальных предпочтений.
Демонстрация
Альтернативный код
Другой способ решения этой проблемы - использовать ScaleY. Он будет хорошо работать в браузерах с поддержкой CSS3, но может не работать в версиях Internet Explorer до IE9.
Код CSS3 выглядит следующим образом:
HTML
Код
<div id="sakitu-pesaven">
<h1>Наведите меня</h1>
<div id="pasumu-koaching">
Категорий сайта
Категорий сайта
Категорий сайта
Категорий сайта
Категорий сайта
Категорий сайта
</div>
</div>
CSS
Код
#pasumu-koaching {
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
overflow: hidden;
background-color: #dedede;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
#sakitu-pesaven:hover #pasumu-koaching {
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
Однако такой подход не идеален, так как преобразованный объект ведет себя как относительно позиционированный элемент. Тем не менее, стоит рассмотреть в качестве альтернативы.
Демонстрация
