/* ---------------
Vertikal scroll menu with jQuery
---------------------------------- */
#scroolvrtkl{
height:400px;
overflow:hidden;
position:relative;
background-color:#999;
}

#vrtikal {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

#vrtikal li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}

#vrtikal li a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

#vrtikal li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jquery.color.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {

    //Background color, mouseover and mouseout
    var colorOver = &#39;#31b8da&#39;;
    var colorOut = &#39;#1f1f1f&#39;;

    //Padding, mouseover
    var padLeft = &#39;20px&#39;;
    var padRight = &#39;20px&#39;;

    //Default Padding
    var defpadLeft = $(&#39;#vrtikal li a&#39;).css(&#39;paddingLeft&#39;);
    var defpadRight = $(&#39;#vrtikal li a&#39;).css(&#39;paddingRight&#39;);
  
    //Animate the LI on mouse over, mouse out
    $(&#39;#vrtikal li&#39;).click(function () {
        //Make LI clickable
        window.location = $(this).find(&#39;a&#39;).attr(&#39;href&#39;);
  
    }).mouseover(function (){
  
        //mouse over LI and look for A element for transition
        $(this).find(&#39;a&#39;)
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {

        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find(&#39;a&#39;)
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });

    //Scroll the vrtikal on mouse move above the #sidebar layer
    $(&#39;#scroolvrtkl&#39;).mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($(&#39;#scroolvrtkl&#39;).offset().top);  
  
        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($(&#39;#scroolvrtkl&#39;).height() + s_top);

        //Roughly calculate the height of the vrtikal by multiply height of a single LI with the total of LIs
        var mheight = parseInt($(&#39;#vrtikal li&#39;).height() * $(&#39;#vrtikal li&#39;).length);

        //I used this coordinate and offset values for debuggin
        $(&#39;#debugging_mouse_axis&#39;).html(&quot;X Axis : &quot; + e.pageX + &quot; | Y Axis &quot; + e.pageY);
        $(&#39;#debugging_status&#39;).html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
      
        //Calculate the top value
        //This equation is not the perfect, but it &#39;s very close
        var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
  
        //Animate the #vrtikal by chaging the top value
        $(&#39;#vrtikal&#39;).animate({top: top_value}, { queue:false, duration:500});
    });


});

</script>

<div id="debugging_mouse_axis"></div>
<div id="debugging_status"></div>
<div id="scroolvrtkl">
<ul id="vrtikal">
<li><a href="#">vrtikal 1 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 2 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 3 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 4 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 6 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 7 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 8 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 9 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 10 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 11 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 12 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 13 <span> / 2007</span></a></li>
<li><a href="#">SUPER LONG vrtikal vrtikal vrtikal vrtikal SIZE 14 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 15 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 16 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 17 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 18 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 19 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 20 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 21 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 22 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 23 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 24 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 25 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 26 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 27 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 28 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 29 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 30 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 31 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 32 <span> / 2007</span></a></li>
<li><a href="#">vrtikal 33 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">vrtikal SIZE LONG 35 <span> / 2007</span></a></li>
</ul>
</div>