Плавающий блок (div) почти готов, но есть косяк
 

Друзья, вчера просидел с решением пол дня, сегодня уже тоже прошло пол дня как пытаюсь разобраться и уже голова идёт кругом. ПОМОГИТЕ пожалуйста с плавающим блоком фильтра товаров на странице товаров.

Ссылка на страницу с фильтром
http://teatown.club/chay

Пытаюсь сделать как сделано на сайте apple
http://www.apple.com/shop/mac/mac-ac...-cables?page=2

Почти всё уже готово, осталось исправить только один косяк, который мне уже мозг взорвал.

Когда фильтр большой по высоте и не помещается весь целиком на экране, то:

1. При пролистывании страницы вниз, чтобы он скроллился до самого нижнего значения фильтра и прилипал к низу окна браузера и отлипал от низа окна браузера при достижении до footer'a.

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

Конкретно к фильтру в его настройках можно указывать JS скрипт и сейчас он указан следующий:

$(window).scroll(function() {
    var sb_m = -3; /* отступ сверху и снизу */
    var mb = 367; /* высота подвала с запасом */
    var st = $(window).scrollTop();
    var sb = $("#column-left");
    var sbi = $("#column-left .mfilter-box-1");
    var sb_ot = sb.offset().top;
    var sbi_ot = sbi.offset().top;
    var sb_h = sb.height();
 
    if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
       if(st > sb_ot) {
            var h = Math.round(st - sb_ot) + sb_m;
            sb.css({"paddingTop" : h});
        }
        else {
            sb.css({"paddingTop" : 0});
        }
    }
});