适合屏幕底部/顶部的菜单

Question

我在侧面菜单上看到了一个很酷的style / js函数（我可以告诉它是什么）。 你知道当你有一个很长的中心页面并且你/你们两边都结束并留下一个空白的情况吗？那么这个网站实现了这个东西，当用户scrool到侧面菜单结束的地方 - 菜单得到绝对位置，并没有移动。

我该怎么做？

如果你想看一个例子，你可以看here（只需滚动并查看两侧）

Answer 1

我相信您可以使用此功能获得类似效果：http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/（只需将0作为速度参数而不是slow移动，如example中所示）添加关于当前位置是否适合显示的框的条件（您可以使用框的高度 - 在页面上移动菜单或包含菜单的框 - 使用.height() jQuery函数）。

修改

您引用的页面使用以下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>

make-fixed CSS类具有以下定义：

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

Answer 2

即使用户滚动，您也可以使用CSS position:fixed属性使元素保持在同一位置：http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning