Как на jQuery сделать плавающий DIV, появляющийся после прокрутки последнего DIV в боковой колонке и докручивающийся при появлении подвала страницы?

Question

[MonkIncr]

Пример - habrahabr.ru - Блок "Популярные за сутки"

Answer 1

[hjk]

Можете подсмотреть здесь

Answer 2

[Александр Глущенко]

jsfiddle.net/2yAmJ

Comments

[MonkIncr]

@Спасибо всем, решения от @hjk и @somenumboola очень понравились.
Надо будет взять за основу @somenumboola и доделать его до @hjk, чтобы при встрече с подвалом блок уезжал наверх.

Answer 3

[Monika Love Joy]

leafo.net/sticky-kit

Answer 4

[Юрий Лобанов]

Как вариант, считаете отступ последнего блока от верха, прибавляете к нему высоту блока. Сравниваете при scroll с scrollTop и если больше или равно - задаете класс нужному блоку с position:fixed. Не забывая при этом, что если блок вытаскивается из потока, его надо заменить margin-top следующего за ним блока на величину, равную высоте блока.
Соответственно, при определенном scrollTop надо его скрывать, чтобы он не залез на футер. Можно сделать просто, если блок не большой высоты, то просто следить, чтобы scrollTop не был равен scrollHeight.
Все это можно написать за 10 минут, если у Вас есть знания.

Comments

[MonkIncr]

Теория понравилась, начну с реализаций

Answer 5

[Olexandr Dmukhovskiy]

Здравствуйте, Пример с использованием Bootstrap

$('#my-affix').affix({
    offset: {
      top: 100, bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

ещё нужно 3 сроки чтобы оно заработало :)

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Учитывайте что для запуска с файла а не с нужно перед //добавить http:

Подробно тут

Comments

[Юрий Лобанов]

Affix на бутстрапе не даст желаемого результата. Посмотрите, как это выглядит на хабре.