Question

I saw a cool style/js function (I can tell what it is) that implemented on a side menu.
You know the situation when you have a long center page and one of / both of you sides ends and that leave a blank space? Well this site implemented this thing that just when the user scrool to the place where the side menu end – the menu get absolute postion and doesnt move.

How can I do this?

If you want to see an example you can look here (just scroll and look on the sides)

Answer 1

I believe you can achieve similar effect using this: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/ (just making it move with 0 as speed parameter instead of slow, as in the example) and adding conditions about whether the current position fits within the box it is displayed (you can take height of the box – menu being moved on page or box that contains the menu – by using .height() jQuery function).

EDIT:

The page you referenced uses the following JavaScript code to support what you try to accomplish:

<script type="text/javascript">
    $(function(){
        var seoHeight =  $$('dvIndexSeoMaster').height();
            seoHeight = (seoHeight > 0) ?  seoHeight : 0; 
        var documentHeight = $(document.body).height() - 120 - seoHeight;
        var fixedMode = false;
        var hasFixedClass = false;
        var leftColElm = $sc('dvFixed');
        var leftColPos = leftColElm.offset().top;
        var leftColHeight = leftColElm.height();
        var rightColElm = $$('dvIndexMasterRightCol');
        var rightColPos = rightColElm.offset().top;
        var rightColHeight = rightColElm.height();
        function scrollElm(elmPos,elmHeight,objElm, cssClass){
            var fixedMode = false;
            var hasFixedClass = false;
            var windowTop = $(window).scrollTop();
            (windowTop >= elmPos && (windowTop + elmHeight) < documentHeight) ? fixedMode = true : fixedMode = false;
            if( fixedMode){
                $(objElm).addClass(cssClass);
                hasFixedClass = true;
            }else if( (fixedMode == false)){
                $(objElm).removeClass(cssClass);
                hasFixedClass = false;
            }
        };
        $(window).scroll(function(){
            scrollElm(leftColPos,leftColHeight,leftColElm,'make-fixed');
            scrollElm(rightColPos,rightColHeight,rightColElm, 'make-fixed');
        });
    });
</script>

And the make-fixed CSS class has the following definition:

.make-fixed {
    position: fixed;
    top: 0;
    z-index: 200;
}