Сверху страницы есть корзина, как сделать что бы она была relative
, но если выходит из зоны видимости, отрывалась и становилась fixed
.
2 ответа
Стандартное решение:
- Подписываетесь на событие прокрутки
- В обработчике события проверяете текущее смещение от верха:
если смещение больше заранее рассчитанного значения,
то ставить элементу с корзинойposition:fixed
,
иначе ставить элементу с корзинойposition:relative
.
Либо выставлять соответствующие css-классы.
Ссылки по теме
Обработчик onscroll
Добавление обработчика события
Текущее смещение от верха страницы
Условный оператор
Выставление стилей
-
-
@Николай, пример чего именно? кстати, без яваскрипта, на сколько я понимаю, это не сделать– Grundy ♦23 ноя 2015 в 11:25
-
-
Вот маленький и простой код с использованием JQ библиотеки. Надеюсь поможет.
var distance = $('.basket').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.basket').addClass('sticked')
}
if ( $window.scrollTop() <= distance ) {
$('.basket').removeClass('sticked')
}
UPD И добавляем соответственно сам класс sticked, который будет присваиваться в случае наступления события, например:
.sticked {
position: fixed;
top: 0;
z-index: 999;
}
Иногда бывает, что ширина элемента после fixed начинает прыгать, тогда указываем в стиле .sticked параметр width:inherit, что поможет унаследовать ширину объекта после его фиксации.