Плавающий блок на jQuery.sticky

В силу того, что многие блогоориентированные сайты имеют длинную контентную часть и короткую служебную (служебная колонка слева/справа), в том числе и LS, решил сделать плавающий по странице служебный блок. При этом по общему стилю внизу страницы без этого блока все выглядит несколько убого: слева пустое поле, справа — контент. Кособоко, иными словами, как говорят дизайнеры. Подобную по идее реализацию можно видеть на Хабре, но там, естественно, технически другая реализация.



Суть реализации: блок всегда должен находиться на текущем экране при прокрутке в «служебной» колонке.

Использовал jQuery-плагин jquery.sticky.js ( www.stickyjs.com ), ранее я его юзал на другом своем проекте, но и сейчас его пришлось допиливать.

Суть в том, что берется последний в контейнере aside#sidebar блок (в моем случае я решил, что это будет «Активность») и помещается в div id=onTopFloat (в шаблоне blocks/block.stream.tpl). Собственно к этому onTopFloat и привязывается плагин:
$("#onTopFloat").stickyfloat({ duration: 200, offsetY: 60 });


Но блок #onTopFloat «плавает» только в контейнере, который имеет высоту height. По-умолчанию же высота aside#sidebar равна высоте всех блоков внутри, и выходит что «выплывать вниз» блоку-то некуда, ибо он уже упирается в низ своего контейнера. Посему придумал поместить плавающий onTopFloat во вспомогательный контейнер onTopDiv, высота которого будет доходить до конца страницы:

<div id=onTopDiv>
<div id=onTopFloat>
... блок "Активность"
</div>
</div>


Ну а дальше остается высчитать высоту нашего вспомогательного контейнера, низ которого должен доходить до низа контента: это высота контента #wrapper минус высота всех предыдущих блоков в aside#sidebar:

var h = parseInt($("aside#sidebar>section:eq(0)").css("height")) + parseInt($("aside#sidebar>section:eq(1)").css("height")) + parseInt($("aside#sidebar>section:eq(2)").css("height")) + parseInt($("aside#sidebar>section:eq(3)").css("height"));
var w = parseInt($("#wrapper").css("height"));
var h2 = w - h - 60; // 60 - это подобранный коэффициент, чтобы блок не наезжал на верх.панель
$("#sidebar div#onTopDiv").css("height", h2+"px");


PS: что меня смущает, так это вот такое топорное вычисление высоты h всех контейнеров, но через, к примеру, :lt(2) не получилось.

Ну и последнее: кол-во выводящихся сообщений в блоке «Активность» тоже надо подбирать, чтобы сам блок не был слишком высоким. В моем случае — это 5 сообщений.
Мою реализацию можно увидеть на www.tuskenium.com/feed/

3 комментария

avatar
avatar
Да, видел. Но у меня задача на будущее стоит несколько шире: в плавающий блок пихать еще и свою инфу.

А в данном плагине блок менять можно? Т.е можно сменить «Лучшие топики» на «Активность»?
avatar
с некими танцами — да.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.