Простой плавающий блок на jQuery

Капля плавающая на воде  В последнее время на сайтах и в блогах стало популярным размещать фиксированный или правильнее сказать, плавающий блок, в который можно поместить меню, форму подписки или другую информацию, которая должна быть обязательно на виду. Суть в том, что такой блок изначально расположен как обычный элемент, но при прокрутке фиксируется и движется вместе со всей страницей, оставаясь видимым.
  В общем-то меня эта тема не обошла стороной, и решил я сделать себе плавающие меню, с помощью jQuery и этого самого фиксированного блока. И вот менюшка "плавает", как и задумывалось, и теперь пришло время поделится тем, как просто и быстро сделать такой плавающий блок со смещением у себя на сайте или в блоге.
  В принципе, простой фиксированный блок возможно реализовать и только при помощи CSS - свойства position со значением fixed, но тогда он изначально будет намертво определен в заданной точке на мониторе посетителя и "плавающим", его будет назвать проблематично. Нам же нужен блок, который смещается и фиксируется лишь при прокрутке страницы.
  Чтобы было понятнее смотрим:
DEMO
  Сразу замечу, что вариантов реализации в сети достаточно, но действительно толковых не много. Большинство обладают громоздким, часто не нужным, кодом, а некоторые не совсем и универсальны. Данный вариант самый простой, без анимаций и прочего - немного CSS и совсем немного jQuery.
HTML будет выглядит так:
  <div class="floating">
   <!--Тут содержимое блока-->
  </div>
  Теперь CSS. Сразу добавим и новый класс, у которого позиционирование зададим как fixed:
.floating {
 background: #1c1c1c;
 color: #fff;
 font: normal normal 14px Tahoma;
 padding: 10px;
 width: 300px; /*указываем ширину*/
}
.fixed {
 position: fixed;
 top: 10px; /*здесь указываем отступ сверху*/
 z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}
Позиционирование у блока .floating, указывать не нужно, однако он должен располагаться внутри родительского элемента, относительно которого будет позиционироваться на странице. Также нужно указать ширину иначе при фиксированном позиционировании он займет всю доступную область и выйдет за границы родителя.
  А вот и сам скрипт jQuery. Его задача проста - когда страница прокручена до определенной высоты добавить класс и зафиксировать блок.
$(function(){
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > 200) $('.floating').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс
  else $('.floating').removeClass('fixed');
 });
});
 Все что нужно по оформлению, положению - прописывается в CSS, скрипт выполняет, как и положено, организационную функцию. Проще не куда.
 Не забываем что для работы такого рода лабуды к сайту должна быть подключена библиотека jQuery.
05.12.2013
  - Изменен код скрипта: добавлена переменная начальной позиции плавающего блока от окна браузера, для упрощения внедрения скрипта.
$(function(){
 var topPos = $('.floating').offset().top; //topPos - это значение от верха блока до окна браузера
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > topPos) $('.floating').addClass('fixed');
  else $('.floating').removeClass('fixed');
 });
});
25.10.2013
  Дополнение статьи по часто задаваемым вопросам:
  - Как убрать "скачок" контента вверх когда блок получает фиксированное позиционирование.
  - Как сделать чтобы на сайте с фиксированной шириной, при прокрутке, блок не выходил за границы родительских блоков или оставался в пределах своей колонки.
  - Дополнение скрипта чтобы плавающий блок не "наезжал" на другие блоки и "подвал"(футер) сайта, останавливался или исчезал при их достижении.
  /*--------------*/
  Добавлены два файла HTML с исходным кодом, которые вы можете скачать по прямой ссылке тестировать, использовать и изменять по своему усмотрению.
  На демонстрационной странице в начале статьи показан первый вариант скрипта, без доработок.

Как убрать смещение контента, когда блок становится плавающим

  Изначально, пока блок не стал плавающим, он имеет относительное позиционирование и полностью участвует в структуре веб-страницы, т.е. своими размерами, в частности высотой, влияет на положение других блоков сайта. Когда же в процессе прокрутки блок приобретает, с помощью скрипта, фиксированное позиционирование, то он выпадает из общей структуры и контент или блоки, которые находились ниже, сразу занимают освободившиеся место. Такой "скачек", естественно, не совсем приятен для разработчика и совсем не приятен для посетителя. Решается данная проблема очень просто, на уровне HTML и CSS.
 Решение:
  Необходимо код плавающего блока обернуть в дополнительный контейнер:
 <div class="container">
  <div class="floating">
   <!--Тут содержимое блока-->
  </div>
 </div>
  При этом, высота блока-обертки в CSS должна быть указана равной высоте плавающего блока включая верхние и нижние, внешние и внутренние отступы:
.floating {
 background:#1c1c1c;
 color:#fff;
 font: normal normal 14px Tahoma;

 padding: 10px;
 margin: 5px;
 height: 500px;
 width: 300px;
}
.container {
 height: 530px; /*высота блока + отступы*/
}
  В результате, пока блок будет спокойно прокручиваться вместе со страницей, место для него будет зарезервированно родительским контейнером, который не даст прыгать всему остальному содержимому.

Положение внутри блоков и на сайтах с фиксированной шириной

  Так как в реализации данного варианта плавающего блока используется добавочный класс с фиксированным позиционированием, особенности которого заключаются в том, что положение блока на веб-странице привязывается не к родительским элементам, а к окну браузера, то естественно что на сайтах с точно определенной шириной, блок может вести себя некорректно, съезжая за пределы шаблона и родительских блоков. Однако, и эта проблема решается на уровне CSS.
  Решение:
  У родительского блока должна быть указана ширина, любое значение (%, px и т.д.), кроме auto.
  Для основного класса пл-го блока, в данном случаи .floating, необходимо точно указать ширину в абсолютных единицах (напр.: px), при этом она, включая отступы, не должна превышать ширины блока родителя.
  Для прибавочного класса, в данном случаи .fixed, в стилях не стоит указывать смещение влево и вправо (left и right).
  /*-----*/
  Демо с примененными решениями:
DEMO 1

Манипуляции с плавающим блоком относительно других блоков сайта

  Часто возникающая проблема, заключается в том, что если блок содержит большое количество информации, т.е. его высота увеличивается, то при прокрутке до низа страницы, блок, достигая подвала, наплывает и наезжает на него, перекрывая и скрывая его часть.
  В идеале, при достижении футера или любого другого, указанного, элемента страницы, блок должен останавливаться(прекращать движение) до него или плавно изменять видимость, например исчезать. Чтобы решить данную проблему необходимо немного дополнить скрипт, добавив определенные условия поведения плавающего блока в такой ситуации, сохраняя по-прежнему его простоту :)
  Решение:
  Внесем в скрипт переменную, которая будет определять расстояние до необходимого стоп-блока (например: все того же "подвала"), а также, в другую переменную получим высоту самого плавающего блока и затем добавим, к уже имеющимся, дополнительные условия. В данном случаи сделаем чтобы блок исчезал при достижении подвала. В итоге код скрипта будет выглядеть так:
$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('footer').offset().top, //расстояние до подвала от верха окна браузера
      height = $('.floating').outerHeight(); //получаем значение высоты пл.блока
  if (top > topPos && top < pip - height) {$('.floating').addClass('fixed').fadeIn();} //блок будет виден, если значения соответствуют указанным
  else if (top > pip - height) {$('.floating').fadeOut(100);} //блок скроется когда достигнет заданного расстояния
  else {$('.floating').removeClass('fixed');}
  });
});
Переменная значения высоты - не обязательна, если высота известна и меняться не будет можно указать просто цифрами:
$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('footer').offset().top;
  if (top > topPos && top < pip - 500){$('#floating').addClass('fixed').fadeIn();} //500 - это высота пл.блока
  else if (top > pip - 500) {$('#floating').fadeOut(100);}
  else {$('#floating').removeClass('fixed');}
  });
});
  Результат:
DEMO 2

  Однако, не всегда нужно чтобы элемент исчезал и появлялся, иногда необходимо чтобы плавающий блок останавливался при достижении "подвала". И в этом случаи все реализуется довольно просто. Код тогда будет таким:
$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('.footer').offset().top,
      height = $('.floating').outerHeight();
  if (top > topPos && top < pip - height) {$('.floating').addClass('fixed').removeAttr("style");}
  else if (top > pip - height) {$('.floating').removeClass('fixed').css({'position':'absolute','bottom':'0'});}
  else {$('.floating').removeClass('fixed');}
  });
});
  Результат:
DEMO 3
Т.к. в этом случаи используется абсолютное позиционирование, то у родительского элемента, к низу которого будет прижиматься пл.блок, в стилях должно быть явно указано относительное позиционирование - position: relative;

  Более подробно это видно в прикрепленных ниже HTML файлах
  Файлы с исходным кодом обеих вариантов


  И как и прежде критика, мысли и соображения принимаются в комментариях.

©http://magentawave.com

111 комментариев:

  1. Терпеть не могу, когда плавающие блоки закрывают часть текста поста. Предложенный вами вариант - совсем другое.
    Пошел-ка я на свой блог думать какую же информацию в такой плавающий блок поместить можно. Как только придумаю, попытаюсь установить.

    Спасибо за полезную инфу. С меня 150 и огурчик ;)

    ОтветитьУдалить
    Ответы
    1. Немного дополнил статью для понятности. На счет закрывает текст или нет, то это уже вопрос к размещающему такой блок :) В демо просто так расположил его, для наглядности, вот тут меню по-другому расположено и, вроде тоже все в порядке.

      150 - это завсегда хорошо ;).

      Удалить
  2. зачем расчитывать через какое расстояние у меня блок поползет? я лучше сделаю так: как только прокручу это блок то он поедет сразу мной.
    $(function() {
    var box = $('#messagelist'); // ваш блок

    var top = box.offset().top - parseFloat(box.css('marginTop').replace(/auto/, 0));
    $(window).scroll(function(){
    var windowpos = $(window).scrollTop();
    if(windowpos < top) {
    box.css('position', 'static');
    } else {
    box.css('position', 'fixed');
    box.css('top', 0);
    }
    });
    });

    ОтветитьУдалить
    Ответы
    1. Чем лучше? Зачем приплетать сюда parseFloat и replace? А также дважды обращаться к объекту с одной и той же функцией? В таком случаи лучше, и на мой взгляд правильнее, сделать так:
      $(function() {
       var box = $('#messagelist'); // ваш блок
       var top = box.offset().top;
       $(window).scroll(function(){
       var windowpos = $(window).scrollTop();
       if(windowpos < top){
        box.css({position: 'static', marginTop: 'auto'});
       }else{
        box.css({top: '0', position: 'fixed' , marginTop: '0'});}
       });
      });

      Так как функция .offset() в JQ возвращает значение включая отступы, а marginTop изменит и установит нужный.

      Удалить
    2. Анонимный04.12.2013, 16:04

      А как в этом варианте сделать отступ от футера?

      Удалить
    3. Можно так - http://jsbin.com/UbaqOkO/1/edit?js

      Удалить
    4. Анонимный07.12.2013, 13:56

      спасибо работает, подскажите еще. В данном варианте сделать два плавающих блока на странице например в левом и правом сайдбарах, но так чтобы не было конфликта.

      Удалить
    5. так есть решение по двум блокам без конфликта? Пробовал менять переменные, но ничего не получилось(

      Удалить
    6. Предложенное в статье решение предоставляется "как есть" если вам оно не подходит или требуется его доработка, то эта забота ложится исключительно на ваши плечи.
      Индивидуальная разработка проводится по e-mail и оценивается в рублях в зависимости от поставленной задачи admin@magentawave.com

      Удалить
  3. Все хорошо работает !! только в опере когда происходит движение весь контент находящийся справа от блока передвигается влево!! как лучше это исправить

    ОтветитьУдалить
    Ответы
    1. Когда тестил такого не встречал. Надо смотреть.

      Удалить
  4. Спасибо автору за столь простое решение. Функционально. Работает.

    ОтветитьУдалить
  5. Спасибо автору! Просто, кроссбраузерно и главное - все работает даже на мобильниках и планшетах!

    ОтветитьУдалить
  6. Анонимный17.04.2013, 03:11

    А вот у меня проблема: блок отбражается только если начать прокручивать, т.е. в самом верху страницы он НЕ отображается, а при прокрутке до любого другого места- все в порядке. Как поправить?

    ОтветитьУдалить
    Ответы
    1. Анонимный17.04.2013, 03:18

      Ну, то есть получается так: пока не стронешь страницу хотя бы чуть-чуть вниз, блока не видно. А хотелось бы сделать, как в Вашем демо. Что для этого нужно? (Кроме прямых рук :) )

      Удалить
    2. Изначально блок вписан как обычный элемент, а скрипт, при условиях определенной величины прокрутки, изменяет его позиционирование, делая его фиксированным. Если изначально блок не отображается значит где-то ошибка, Показывайте пример.

      Удалить
  7. Анонимный19.04.2013, 13:46

    Спасибо. Все крутбл! Скажите, а как сделать плавное появление блока. То есть вверх при прокрутке он уходит и после плавно появляется сверху. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Если я правильно понял, то можно так: http://jsfiddle.net/GuwZC/

      Удалить
  8. Анонимный22.04.2013, 12:11

    Да. Подходит. Спасибо огромное!

    ОтветитьУдалить
  9. Подскажите пожалуйста, почему-то в IE 10 (Win8) Не работает.. Во всех остальных браузерах все классно. Может какое-то свойство IE Не понимает, фикс бы ему.. А так круто прям.

    ОтветитьУдалить
  10. Вот с такой штукой, добавленной к стилям в .fixed заработало:

    top: expression(document.getElementsByTagName( 'body' )[0].scrollTop +200+ "px");

    200 - все тот же отступ.

    ОтветитьУдалить
    Ответы
    1. В 10-ом тестил под 7-кой - все нормально работало, На 8-ой не тестировал. Спасибо за полезное дополнение :)

      Удалить
  11. То, что искал. Отлично! =)

    ОтветитьУдалить
  12. Анонимный07.06.2013, 11:30

    Подскажите как сделать чтоб на футер не наезжало, чтоб при достижении футера блок начинал прокручиваться вверх?

    ОтветитьУдалить
    Ответы
    1. Для этого нужно дополнительно определить функцией точку начала "подвала", например, той же offset и задать дополнительное условие чтобы при достижении этой точки (этого значения) у блока убирать фиксированное позиционирование.
      Например (простой вариант, так сказать на скорую руку, может кто предложит лучше):

      $(function(){
        $(window).scroll(function() {
        var top = $(document).scrollTop(),
        pip = $('footer').offset().top;
        if (top > 200 && top < pip - 250) {$('.floating').addClass('fixed');} //250 - это возможная высота плавающего блока, что на было "наплыва" блока на футер
        else {$('.floating').removeClass('fixed');}
        });
      });

      Удалить
    2. Вот у меня почему то не работает это вариант - плавающий блок снизу наезжает на все что можно ! Кто знает решение проблемы ?

      Удалить
    3. Читаем внимательно комментарий выше, и статью, а также не плохо в таких случаях показывать пример. Но сразу могу сказать варианты рабочие, и в названии написано "Простой" , а значит без излишеств, если что-то надо дополнительно - надо дописывать(изменять) скрипт под конкретные потребности.

      Удалить
    4. Анонимный15.10.2013, 13:24

      Спасибо! А можно общий рабочий код с этим дополнением? А то никак не могу понять куда это дописать. Не работает никак. ((

      Удалить
  13. Верхнее горизонтальное меню сайта расположено 130px от верха, ширина меню 46px.

    Когда страница прокручивается до заданной высоты, меню становиться fixed, все правильно, как и должно быть. Но когда оно таким становится оно выпадает из общих блоков, и получается что страница прыгает на эти 46px.

    Подскажите как сделать чтоб было плавно без прыжков, точно так же как тут у вас на сайте? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Оберните само меню в дополнительный контейнер и задайте ему, через CSS, полную высоту меню(46px) или чуть больше, тут же можно задать отступы какие надо, само меню будет внутри. Этот, внешний, контейнер не участвует в функциях скрипта и останется на месте когда внутренний приобретет фиксированное позиционирование, таким образом "скачка" не будет. Здесь сделано именно так, можете это просмотреть через инструменты веб-мастера в браузере

      Удалить
  14. Спасибо большое! Перелопатил гугл, в итоге наткнулся сюда и ЧУДО! Именно то, что искал, спасибо большое! Продолжай в том же духе, все понятно и четко!

    ОтветитьУдалить
  15. Анонимный27.06.2013, 19:52

    Здравствуйте. Всё отлично работает. Спасибо вам за замечательный урок. Но есть одна проблемка. Если я устанавливаю position:absolute , то этот блок наезжает на футер. Если же я ставлю position:relative , то этот блок доходит до footer, сдвигает его вниз, а контент таким образом смещается вверх и между футером и контентом получается приличное пустое место. Подскажите пожалуйста как выйти из ситуации?

    ОтветитьУдалить
    Ответы
    1. Это все, "чтобы не наезжал" настраивается уже не в CSS, а с помощью скрипта. Смотрите возможный вариант в моем комментарии от 08.06.13.

      Удалить
  16. Анонимный29.06.2013, 00:44

    Подскажите как сделать чтоб на другие части сайта не наезжало, чтоб при достижении определенного блок начинал прокручиваться вверх? Как в Одноклассниках левый блок рекламы !!!! Как сделать кто подскажет ???
    HELP !!!!!!!!!!!!

    ОтветитьУдалить
    Ответы
    1. Смотрите возможный вариант в моем комментарии выше, от 08.06.13.

      Удалить
  17. Анонимный01.07.2013, 12:26

    Здравствуйте!

    Всё отлично расписали, только я заметил, что в некоторых браузерах (маил, SRWare Iron, Яндекс) у меня правый плавающий блок при прокрутке слезает в плотную к стенке браузера окна. У меня сайт фиксированной ширины. Что можно сделать чтобы в некоторых браузерах этот блок оставался в колонке правой и при прокрутке вниз не выпадал вправо?

    ОтветитьУдалить
    Ответы
    1. Этот вариант и рассчитан на то , чтобы блок был всегда на виду, фиксированное позиционирование предусматривает привязку к окну браузра, а не к разметке сайта. Таковы издержки варианта... Надо больше - надо другой скрипт...

      Удалить
    2. Анонимный03.07.2013, 12:30

      Жаль... Весь инет с этим примером, а для узкого сайта ничего нет толкового. Нашёл вот такой вариант _habrahabr.kz/blog/programming/567.html но есть проблемка другая, при уменьшении браузера (экрана) - блоки постоянно скролят сайт вниз до бесконечности, футер не увидать.

      Удалить
    3. Вы можете к этому скрипту, дописать дополнительные условия, которые определяли бы его позиции в зависимости от размеров окна браузера, но это уже будет не "простой" плавающий блок.

      Удалить
  18. Анонимный29.07.2013, 20:18

    Спасибо вы супер)

    ОтветитьУдалить
  19. Анонимный29.07.2013, 20:19

    Помогли ответы на вопросы пользователей)

    ОтветитьУдалить
  20. Это просто какой-то кошмар! Неужели все таки продвинутые, что ни у кого не возник вопрос "А куда, собственно, всё это чудо вставлять?"????? Я, вроде, не первый день в блоггинге, но и к правке кода не ежедневно прибегаю. Первый раз вижу инструкцию без указания того, куда всё вставлять!

    Прошу хотя бы прокомментировать то, как с этим (худо-бедно) справилась я, т.к. НИ ФИГА не работает!

    1.В самый первый код обернула необходимый виджет.
    2.CSS просто впихнула в "настройка шаблона"-"добавить CSS".
    3.Скрипт вставила сразу перед /head, обернув в отрывающий/закрывающий теги "скрипт". Перед этим подключила библиотеку, добавив туда же необходимый код с вашего сайта.

    В чём ошибка?

    ОтветитьУдалить
    Ответы
    1. Юлия, давайте без криков :) Если вы не первый день в блоггинге, а тем более на Блоггер, то уже скорее всего ознакомлены что такое гаджеты и виджеты, с их структурой и какими они бывают, но я на всякий случай оставлю ссылки на свои труды о них:
      http://www.magentawave.com/2012/02/change-widget-style.html - про гаджеты вообще
      http://www.magentawave.com/2012/03/how-chenge-gadget-in-template-blogger.html - про HTML/JS гаджет.

      Теперь про то что вы делали и почему у вас "НИ ФИГА не работает!"

      1. В Blogger-блоге (в коде шаблона) ничего в HTML добавлять и оборачивать не нужно (если нет надобности что-либо дополнить), у всякого виджета , по крайней мере стандартного, уже имеется свой идентификатор. Определяете его и используете как в CSS, для дополнения стиля и корректировки размещения, так и в скрипте. Т.е. если вы хотите сделать плавающим гаджет с популярными сообщениями то вместо селектора .floating используйте его идентификатор - #PopularPosts1
      Если используете основной(первый) вариант скрипта с дополнительным классом .fixed, то его также добавляете в CSS

      Так же, по-ходу, можете ознакомится со статьей о том как добавить скрипт на сайт (в блог) -
      http://www.magentawave.com/2013/03/how-connect-scripts.html
      http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html - как добавить CSS

      Удалить
    2. Анонимный17.09.2013, 14:36

      Блин! Это чудо, он поехал! Спасибо!!! Правда, всё таки для таких непонятливых как я можно было и здесь пару строчек написать о том, что и куда :)

      Удалить
  21. Анонимный30.09.2013, 21:07

    Спасибо автору! Красава, что догадался и реальный пацан, т.к. поделился!

    ОтветитьУдалить
  22. Анонимный03.10.2013, 03:24

    Что-то с z-indeks и позиционированием, в разных браузерах по разеному, уже голову себе сломал, подскажите пожалуйста как решить эту проблему, если надо могу скинуть исходник.

    ОтветитьУдалить
    Ответы
    1. Начнем с того что не "z-indeks" , а все-таки z-index, возможно в этом проблема №раз, теперь что касается "в разных по-разному", это в каких? CSS тут вполне кроссбраузерный, скрипт тоже...

      Удалить
  23. Николай03.10.2013, 12:54

    А можно добавить тень внизу, чтобы когда блок фиксируется в самом верхнем положении у него появлялась тень, ну или когда он делается активным? И желательно на всю ширину окна, за пределы фиксированного блока. А так автору огромное спасибо, за сие чудо.

    ОтветитьУдалить
  24. Ответы
    1. И слава богу.
      P.S. Ответ, пожалуй, был бы идентичным, даже если бы вместо "6" было "7".

      Удалить
  25. Анонимный24.10.2013, 03:13

    Спасибо, ваш скрипт очень пригодился =)

    ОтветитьУдалить
  26. Рекомендую добавить к DEMO 3 переменную и условие:

    var heightS = $('.article-post').outerHeight();

    if ( heightS > window.innerHeight )
    {
    ....
    }

    Тогда скрипт не будет глючить при малом количестве текста в .article-post

    ОтветитьУдалить
    Ответы
    1. А при чем тут высота поста (блока сообщения)? Не пойму, блок "плавает" в боковой колонке и к блоку поста не имеет никакого отношения. Не могли бы вы пояснить подробнее в чем "глюк" желательно с "глючным" примером. Ибо сакральный смысл ввода этой переменной я в упор понять не могу.

      Удалить
  27. Анонимный13.11.2013, 09:30

    Охтыж блин, спасибо за статью!!! супер!!!

    ОтветитьУдалить
  28. Анонимный19.11.2013, 11:58

    Спасибо большое за скрипт. Долго искал. Все варианты, которые находил были либо кривыми. либо громоздкими. Это то, что нужно. Я за минимализм =)

    З.Ы. Автор, у Вас в коментах при выборе подписи комментария имя/url у всплывающего окна прозрачный фон. Не критично, но не очень смотрится. =)

    ОтветитьУдалить
    Ответы
    1. Форма гугловская и к тому же iframe - я тут бессилен... :)

      Удалить
  29. У меня на сайте страницы с динамическим контентом (php), высота контента на всех разная, если я задаю одинаковую высоту плавающего блока для всех страниц, то получаю следующее: на одной странице блок не доезжает до футера, на другой - переезжает его. Есть ли решение такой проблемы?

    ОтветитьУдалить
    Ответы
    1. Показывайте пример.

      Удалить
    2. Все 3 варианта кривые. Блок подскакивает при скроле. Происходит это потому что страница сначала сдвигается и рендерится, а уже потом приходит событие.
      Получается что блок уже проскролен выше окна и тут скрип его внезапно одергивает и ставит на место.

      Удалить
    3. Вариант везде один, только с дополнениями по потребностям.
      Проблема такая есть и я о ней знаю, при ооочень медленном скролинге это дело видно, как устранить, не порушив простоту затеи, я пока что не знаю, но упорно над этим думаю. Если есть варианты, то с радостью все их рассмотрим и внедрим лучший. Поддержку авторства гарантируем.

      Удалить
  30. А какая библиотека JQ у вас подключена?

    ОтветитьУдалить
    Ответы
    1. У меня всегда последняя с гуглохоста, т.е. ссыль такого порядка :
      //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

      Удалить
  31. Куда вставлять div понятно, CSS тоже, а вот куда вставлять скрипт jQuery (на joomle)? Метод тыка не люблю, а знаний в этой области не хватает. Подскажите пожалуйста

    ОтветитьУдалить
    Ответы
    1. Честно говоря про Joomlу вообще ничего не скажу, ибо не знаком с тамошней CMS, думаю лучше по этому вопросу проконсультироваться на оф. форуме. Вот что интересного выдал Гоша интересного по данному вопросу:
      http://allineed.ru/ru/articles-joomla/j15dev/59-joomla-adding-javascript-to-module.html
      http://stackoverflow.com/questions/18080444/how-to-add-jquery-code-within-a-module-in-joomla-3-1
      http://wemarus.ru/joomla/216-dobavlyaem-v-head-skripty-stili-meta-tegi-joomla.html
      может, вам как пользователю этой системы и поможет.

      Удалить
    2. Спасибо, помогло :)

      Удалить
  32. Анонимный10.02.2014, 00:11

    хорошее решение. очень! спасибо :)

    ОтветитьУдалить
  33. Анонимный08.04.2014, 22:17

    привет, а не подскажешь, как сделать, что бы блок был прижат к низу?

    Спасибо.

    ОтветитьУдалить
    Ответы
    1. Т.е. "прижат к низу"? Сразу или постоянно? Если постоянно то можно ограничится просто фиксированным позиционированием, через CSS. Вот инструкция.
      http://www.magentawave.com/2012/03/fixed-elements-in-blogger.html

      Удалить
  34. необходимо как-то так, только вверх ногами :) http://yadi.sk/d/6Xzzni1tM5Y7b

    ОтветитьУдалить
    Ответы
    1. А по точнее можно?

      Удалить
    2. поточнее, необходимо форму комментария сделать плавающей, и чтоб она была прижата к низу страницы

      Удалить
    3. Для этого можно использовать только CSS (без скрипта). Например
      https://googledrive.com/host/0B__xB2sZtgF_SE5reVk3ZzFWSHc/Float_2%20%281%29.html

      Удалить
    4. спасибо, но необходимо чтобы плавающий блок останавливался при достижении "подвала"

      Удалить
  35. Спасибо за статью! ;)

    ОтветитьУдалить
  36. Анонимный17.07.2014, 16:29

    Дорогой автор, пользовался последним вашим вариантом (DEMO3). Все устроило, но почему-то когда блок доходит до футера он не останавливается, а просто пропадает... Уже и не знаю, что думать :(
    P.S. Родительский элемент = relative, как Вы и писали, однако пока сдвигов никаких :(

    ОтветитьУдалить
  37. Анонимный05.12.2014, 23:04

    Вот я вроде не совсем рукожоп, но почему то не один из предложенных вами вариантов не заработал вообще ни в хроме ни в опере ни в файрфоксе

    ОтветитьУдалить
  38. Доброго времени суток!
    Благодарю за отличную статью! Весь гугл облазил, уже думал закрывать ноут. Последний раз решил зайти посмотреть что предлагают на этот раз. Попал на этот отличный сайт)
    У меня остался лишь один вопрос: как сделать так чтобы при скролле (scrollTop), блок двигался не вниз, а слева направо?
    Благодарю Вас за ответ!

    ОтветитьУдалить
  39. Анонимный26.12.2014, 17:32

    Спасибо, пригодилось

    ОтветитьУдалить
  40. Анонимный23.01.2015, 12:20

    Помогло! Спасибо автору за DEMO 3

    ОтветитьУдалить
  41. Анонимный03.03.2015, 13:24

    Спасибо большое за скрипт - воспользовалась третьим вариантом!
    А теперь возникла потребность, чтобы изначально фиксированный блок при прокрутке прилипал к появляющемуся футеру. Как бы часть Демо 3.
    Подскажите, пожалуйста, как такое сделать.
    Спасибо!

    Катерина

    ОтветитьУдалить
  42. Большое спасибо за предложенное решение. Хотелось бы лишь уточнить. У меня плавающий блок находится внизу правой колонки - под другими блоками (страница прилагается). При достижении верхней кромки плавающего блока он сразу весь всплывает вверх экрана, загораживая собой блоки, расположенные непосредственно над ним. Как сделать так, чтобы он начинал "плавать" только когда полностью появляется внизу экрана, без подскока вверх и загораживания выше расположенного матерала. (Блок уже в предложенной Вами "обертке".) Заранее благодарю

    ОтветитьУдалить
  43. Анонимный24.07.2015, 00:04

    Годнота! Админу респект.

    ОтветитьУдалить
  44. Вот еще один интересный вариант без использования position и блок останавливается перед футером - http://makeasite.ru/blog/sticky-block-at-sidebar.html

    ОтветитьУдалить
  45. И вам спасибо, заходите еще )

    ОтветитьУдалить
  46. Анонимный15.02.2016, 11:34

    Спасибо, как как сделать крестик чтобы блок исчез?

    ОтветитьУдалить
    Ответы
    1. Вам сюда - http://www.magentawave.com/2016/02/close-button-for-element.html

      Удалить
    2. Подскажите пожалуйста, в чем проблема, код брал из исходников. Блок работает, доезжает до футера, замирает и едет вместе со страницей вверх, как надо. Но вот доходя до верха страницы, он не зацыпается сразу при ее достижении, а полностью ее проезжает и потом блок выкидывает и он фиксируется, почему так? Вот пациент - litezona.ru

      Удалить
    3. Не могу сказать в чем причина, до вас таких проблем не было.

      Удалить
  47. Анонимный31.10.2016, 11:25

    Лично реализовал. Делал для себя. Прошу прощения за такие комменты

    Имеем левую колонку (высокую) которая фиксируется при достижении нижней части окна браузера.

    /* Фиксируем левую колонку при скролинге */
    $(window).scroll(function(){ // срабатывает функция когда происходит скролинг
    var top = $(document).scrollTop(); // количество пикселей проскроленно вниз от верхней части окна браузера
    var height = $('#aside1').outerHeight(); // общая высота левого блока
    var heightBody = $(window).height(); // высота окна браузера (то что узреваем перед собой в окошке)
    var pip = $('#aside1').offset().top; // координаты верхней части блока относительно самого вверха
    if(top >= (height - heightBody + 120)) $('#aside1').addClass('fixed'); // 120 это высота шапки сайта(у вас своя,если она есть, если нет нужно убрать ' + 120', что тут происходит, мы проверяем количество пикселяндров опущенных вниз, если их больше высоты самого левого блока, мы фиксируем блок к низу экрана, учитываем шапку, если она ёпть присутствует)
    else $('#aside1').removeClass('fixed'); // ну а здесь отменяем фиксацию если будет все иначе чем выше сказанное.
    }); // закрываем функцию и радуемся )

    ОтветитьУдалить
  48. Анонимный08.11.2016, 13:00

    Подскажите, плз, куда и как правильно вставить код на Wordpress. По div и CSS - понятно.

    ОтветитьУдалить
    Ответы
    1. Этот вопрос скорее к сообществу WordPress надо бы адресовать )

      Раньше был там чудо плагин Simple Scripts, в современной теме в адмике вроде бы уже есть возможность вставлять скрипты, доступ через настройки темы.

      На всякий случай пару плагинов, которые вы можете найти на соответствующих страницах:
      Header and Footer Scripts и CSS & JavaScript Toolbox

      https://wordpress.org/plugins/header-and-footer-scripts/
      https://wordpress.org/plugins/css-javascript-toolbox/

      Удалить
  49. Спасибо за скрипт!

    Работает с адаптивным дизайном корректно, если прописать ширину таблицы, .floated, столбцов или ячеек в пикселях.

    Вот только нюанс - на мобильных устройствах, если менять ориентацию или ресайзить окно браузера в настолке, при прокрутке вверх заголовок начинает скакать - возможно от того что переменная topPos для ".floating" определяется при первоначальной загрузке страницы, и потом при изменения размера окна браузера происходит какое- то смещение. Помогает перезагрузка страницы для переопределения переменной для изменившегося размера окна браузера - тогда снова .floating плавает и исчезает когда надо.

    http://s019.radikal.ru/i608/1611/7c/ea1dc180bd51.jpg - пример.

    Хорошо бы этот момент как-то решить :)

    ОтветитьУдалить
    Ответы
    1. Решить этот момент очень просто. Нужно заключить скрипт в конкретную функция и вызывать ее каждый раз при изменениях размеров экрана. Решение:

      $(function(){
      function mobileFloating(){ //заключаем все в конкретную функцию
      $('.floating').each(function(){ //блок добавляем в цикл
      var topPos = $('.floa...
      ...
      } //конец mobileFloating
      });
      $(window).on('load resize',mobileFloating); // вызываем функцию при загрузке и ресайзе
      });

      Удалить
    2. Попробовал в работающий скрипт (https://jsfiddle.net/qa2f1ry0/#&togetherjs=0EQOmFD6qM) внести предложенные выше изменения, однако в силу своей неосведомленности о js скорее всего что-то напутал: https://jsfiddle.net/01k2kat5/

      Удалить
    3. А кто функцию вызывать-то будет? Создать создали, а вызвать забыли)) Ну и как бы с закрытием функций тоже нужно быть по внимательнее, скобки не терять
      https://jsfiddle.net/01k2kat5/6/

      Удалить
    4. Работает, но... заголовок все равно скачет. Попробовал проверить срабатывание resize, похоже не работает (не выскакивает сообщение): https://jsfiddle.net/01k2kat5/7/

      Удалить
  50. Небольшое уточнение: .floating теряет точность в переменной topPos при ресайзе с изменяющимся по высоте контентом. Конкретно в моем случае это уменьшившийся div до .header. Иллюстрация (в CSS): https://jsfiddle.net/01k2kat5/14/

    Реинициализация скрипта по .resize(mobileFloating()) не помогает, только перезагрузка страницы. Видимо браузер отдает скрипту неверные данные.

    ОтветитьУдалить
    Ответы
    1. Может быть это все в вашем случае и не нужно? А достаточно будет метода описанного в статье чтобы избежать прыжка плавающего блока?
      https://jsfiddle.net/01k2kat5/11/
      Плюс, возможно на jsfiddle и ресайз не корректно работает ибо на нормальной странице все тип-топ
      http://demo.magentawave.com/2016/11/adaptive-jquery-floating-block.html (поиграйте с размером окна)

      Удалить
    2. На jsfiddle просто пример кода, будем стараться сделать как в примере выше.

      Спасибо за предложенные решения!

      Удалить
    3. Загрузил в маленьком окне http://demo.magentawave.com/2016/11/adaptive-jquery-floating-block.html, раскрыл на весь экран, блок сместился (не специально, оно само :), результат на скрине:http://s019.radikal.ru/i640/1611/5e/b3d65bc421fa.jpg.

      Браузер Chrome (Версия 54.0.2840.99 m (64-bit), Win7 Ult.

      Удалить
    4. Это пример работы скрипта на ресайз, все остальное там еще не сделано, это просто пример ))

      Удалить
  51. А как бы такое сотворить на несколько одноименных блоков, имеющим одно и тоже место на странице (они при прокрутке должны просто друг на друга налезать)?? Спасибо

    ОтветитьУдалить
    Ответы
    1. А можно поподробнее? Но уже на данном этапе, вам просто нужно получить позиции начала всех блоков и указать условие, при котором они будут смещаться, чтобы были друг не друге можно использовать CSS z-index, с разными значениями.

      Удалить
  52. Скажите пожалуйста, как пересканировать dom (вернее, узнать новое положение плавающего блока) после того, как над ним (выше по дереву) появляется новый контент (разворачивается / сворачивается блок типа fieldset)? Сейчас получается так: открываю страницу, на ней есть свернутый fieldset, а ниже уже сетка с плавающим блоком. При прокрутке всё ок. Однако, если я раскрываю fieldset и начинаю прокручивать, плавающий блок фиксируется при достижении границы, установленной при загрузке страницы (то есть относительно той высоты до плавающего блока, которая была до того, как я развернул fieldset).

    ОтветитьУдалить
    Ответы
    1. В скрипт нужно добавить событие по клику на fieldset, которое будет изменять значение переменной на высоту блока fieldset, чтобы плавающий блок фиксировался после прокрутки fieldset.

      Удалить
    2. Спасибо за ответ, но я уже нашел более подходящее для меня решение — http://leafo.net/sticky-kit/ — может еще кому-то будет полезно.

      Удалить
  53. Сергей12.05.2017, 15:21

    Подскажите пожалуйста что изменить что б получилось так:
    допустим есть 2 блока, слева и справа, слева блок длиннее в 3 раза чем правый, а правый блок больше окна браузера. т.е. что бы увидеть конец правого блока нужно прокрутить весь левый блок (ну это зависит от размера экрана). Нужно сделать что бы правый блок тоже прокручивался вместе с левым, но когда правый блок заканчивается он просто липнет и не двигается...

    Ну как то так, надеюсь поймете и поможете :)

    ОтветитьУдалить
  54. Анонимный03.12.2017, 16:23

    Спасибо, все кульно получилось

    ОтветитьУдалить
  55. Автору большое спасибо за статью. Долго искал подобное решение.

    ОтветитьУдалить
  56. почему-то последний скрипт не работает(

    ОтветитьУдалить

Следующее Предыдущее

BestProject