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

Question

我看到一个很酷的 style/js 函数（我可以告诉它是什么），它在侧面菜单上实现。 您知道当您有一个很长的中心页并且其中一侧/两侧都结束并留下空白时的情况吗？好吧，这个网站实现了这个功能，当用户滚动到侧面菜单结束的地方时 - 菜单获得绝对位置并且不会移动。

我该怎么做？

如果您想查看示例，可以查看此处（仅滚动并查看侧面）

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