0

Сверху страницы есть корзина, как сделать что бы она была relative, но если выходит из зоны видимости, отрывалась и становилась fixed.

введите сюда описание изображениявведите сюда описание изображения

1
  • 2
    на событии скоролла проверяете если смещение больше высоты корзины = делать ее фиксед
    – Grundy
    23 ноя 2015 в 11:15

2 ответа 2

3

Стандартное решение:

  1. Подписываетесь на событие прокрутки
  2. В обработчике события проверяете текущее смещение от верха:
    если смещение больше заранее рассчитанного значения,
    то ставить элементу с корзиной position:fixed,
    иначе ставить элементу с корзиной position:relative.

Либо выставлять соответствующие css-классы.

Ссылки по теме

Обработчик onscroll
Добавление обработчика события
Текущее смещение от верха страницы
Условный оператор
Выставление стилей

4
  • не подскажите, где можно пример посмотреть? 23 ноя 2015 в 11:23
  • @Николай, пример чего именно? кстати, без яваскрипта, на сколько я понимаю, это не сделать
    – Grundy
    23 ноя 2015 в 11:25
  • @Николай, разобрались?
    – Grundy
    23 ноя 2015 в 11:37
  • еще не получилось, но принцип понятен. 23 ноя 2015 в 11:57
1

Вот маленький и простой код с использованием 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, что поможет унаследовать ширину объекта после его фиксации.

2
  • тогда еще описание класса sticked добавьте
    – Grundy
    23 ноя 2015 в 12:18
  • второй if не нужен, достаточно else поставить
    – Grundy
    24 ноя 2015 в 5:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.