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

Question

我看到一个很酷的 style/js 函数(我知道它是什么)在侧边菜单上实现。你知道当你有一个很长的中心页面并且其中一方/双方结束并留下空白时的情况吗？好吧，这个网站实现了这个东西，当用户滚动到侧边菜单结束的地方时 - 菜单获得绝对位置并且不会移动。

我该怎么做？

如果你想看例子你可以看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;
}