Меню, которое подходит к нижней / верхней части экрана

Question

Я видел классную функцию style / js (я могу сказать, что это), которая реализована в боковом меню. Вам знакома ситуация, когда у вас длинная центральная страница и одна из двух сторон заканчивается, и это оставляет пустое пространство? Хорошо, этот сайт реализовал эту вещь, которая как раз когда пользователь перемещается к месту, где заканчивается боковое меню - меню получает абсолютное положение и не перемещается.

Как я могу это сделать?

Если вы хотите увидеть пример, вы можете посмотреть здесь (просто прокрутите и посмотрите по сторонам)

Answer 1

Я полагаю, что вы можете добиться аналогичного эффекта, используя это: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/ (просто заставив его двигаться с 0 в качестве параметра скорости вместо slow, как в примере ) и добавив условия о том, помещается ли текущая позиция в отображаемом блоке (вы можете определить высоту блока - меню, перемещаемого на странице, или блок, содержащий меню - с помощью функции .height () jQuery).

EDIT:

Страница, на которую вы ссылались, использует следующий код JavaScript для поддержки того, что вы пытаетесь выполнить:

<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>

А CSS-класс make-fixed имеет следующее определение:

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

Answer 2

Элемент может оставаться в том же месте, даже когда пользователь выполняет прокрутку, с помощью свойства CSS position:fixed: http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning