Боковые плавающие баннеры

Тема в разделе "Верстка", создана пользователем Федя К., 1 май 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Федя К.

    Федя К. Постоялец

    Регистр.:
    21 авг 2007
    Сообщения:
    123
    Симпатии:
    85
    Всем доброго времени суток!
    Ребята, помогите пожалуйста найти код чтобы сделать плавающие баннеры на одноколоночном сайте (по бокам)

    Пример:



    Буду очень признателен за помощь!
     
  2. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Я так понял нужен блок, который при достижении края видимой области прилипал к экрану?
    Есть отличный jquery скрипт для этого - waypoints
     
    Solus_Rex нравится это.
  3. ddn128

    ddn128

    Регистр.:
    31 июл 2013
    Сообщения:
    374
    Симпатии:
    163
    Самый простой код - это "fixed" в CSS (на приведённом Вами примере так и сделано)
    http://htmlbook.ru/faq/kak-zafiksirovat-sloi-chtoby-ostavalsya-na-odnom-meste
    Код:
    .vash_style {
        position: fixed;
        top: по вкусу px (или % );
        left (или right): по вкусу px (или % );
        height: по желанию px;
        width: по желанию px;
    }
     
  4. Федя К.

    Федя К. Постоялец

    Регистр.:
    21 авг 2007
    Сообщения:
    123
    Симпатии:
    85
    Как я понял из примера - баннеры не достигают никакой области, они зафиксированы.

    то есть делаются два разных дива слой1 слой2 (с кодом баннеров)
    и для каждого подключается два таких стиля с позиционированием?
     
  5. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Зафиксированным блок становится когда его верхний край касается края окна.
    В примере по ссылке это блок с кодом.

    var sticky = new Waypoint.Sticky({
    element: $('.basic-sticky-example')[0]
    })
     
  6. ddn128

    ddn128

    Регистр.:
    31 июл 2013
    Сообщения:
    374
    Симпатии:
    163
    Да. Если Вам надо "позиционирование", то можно использовать скрипт, кот. привёл vytyacom
    Если позиционирование не надо, достаточно банеры "обернуть" в div
    1. <div class="banner_l">код банера </div>
    2. <div class="banner_r">код банера </div>
     
  7. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Посмотрите ещё такие варианты:
    http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
    http://shpargalkablog.ru/2013/09/scroll-block.html
    В первом варианте достаточно подробные описания и много разных вариантов. + В комментах есть вещи полезные.
     
Статус темы:
Закрыта.