Scrollable filterbox

by shapeshifta

HTML

<div id="wrapper">
    <div id="optionBar" class="expanded">
        <div>x x x x x x x x x<span id="toggler"></span></div>
            <ul>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                <li><label><input type="checkbox" checked="checked"/>Filter</label></li>
                
            </ul>
    
    </div>
    
    test

</div>

CSS

#wrapper {height:800px;position:relative}
#optionBar{position:absolute;height:200px;width:70px;padding:5px 10px;background:#3D6998;color:#fff;overflow:hidden}
#optionBar.expanded{width:250px;position:relative}
#optionBar span {width:20px;height:20px;background:#ED8D15;float:right}
#optionBar.expanded span {background:green}
#optionBar div {background:#000;color:#fff}
#optionBar ul {overflow-y:scroll;height:180px}

JavaScript

var oB = $('#optionBar');
var toggler = $('#toggler');

toggler
    .toggle(
            function(){
                oB
                    .animate({
                        'width' : 70
                    },400)
                    .removeClass('expanded');
            }, 
            function(){
                oB
                    .animate({
                        'width' : 200,
                        'top' : 0
                    },400)
                    .addClass('expanded');
            }
        );
             

    $(window).scroll(function(){     
       var st = $(this).scrollTop(); 
       
        if(!oB.hasClass('expanded')){
           oB
               .stop()
               .animate({"top": st}, 500 );
       
        }
    });