需求：页面content分为左右两栏，左侧固定定位，滚动显示，右侧亦可滚动查看

标签：javascript   float   position   

如题，content宽度为1200px，代码初版如下所示:

<script type="text/javascript" >
    function menuFixed(id){
        $(‘#rightanswer‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        $(‘#viewerPlaceHolder‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        $(‘#viewQuestionBankDiv‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;

        window.onscroll = function(){
            changePos(id,_getHeight);
        }
    }
    function changePos(id,height){
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop < height){
            obj.style.position = ‘relative‘;
            obj.style.top="0px";
        }else{
            obj.style.position = ‘fixed‘;
            obj.style.top="80px";
            document.getElementById(‘flowId‘).style.minHeight=‘800px‘;
        }
    }

    window.onload = function(){
        menuFixed(‘nav_keleyi_com‘);
        $(".addNewScroll").mCustomScrollbar();
    }
</script>

clinetWidth大于1200px，页面效果，即期望效果： 

clinetWidth小于1200px，页面效果

代码完善：

<script type="text/javascript" >
    function menuFixed(id){
        $(‘#rightanswer‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        $(‘#viewerPlaceHolder‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        $(‘#viewQuestionBankDiv‘).css(‘height‘, document.documentElement.clientHeight*0.86+‘px‘);
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;

        window.onscroll = function(){
            changePos(id,_getHeight);
        }
    }
    function changePos(id,height){
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop < height){
            obj.style.position = ‘relative‘;
            obj.style.top="0px";
            document.getElementById(‘nav_keleyi_com‘).style.left=‘0‘;
        }else{
            obj.style.position = ‘fixed‘;
            obj.style.top="80px";
            document.getElementById(‘flowId‘).style.minHeight=‘800px‘;

            var cw = document.documentElement.clientWidth;
            if(cw < 1200){ //用于解决 --》 当浏览器宽度小于1200时，因固定定位的文档脱流而使得scroll-x左右拖动后，右侧内容被盖住的问题， ‘20’指的是wrap的padding值
                var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
                var sl= sl+20;
                document.getElementById(‘nav_keleyi_com‘).style.left= sl +‘px‘;
            }else {
                var fixed_left = parseInt((cw-1200)/2 + 20); //计算出sw大于1200时，左右的margin大小
                document.getElementById(‘nav_keleyi_com‘).style.left= fixed_left +‘px‘;
            }
        }
    }
</script>

本文出自 “琉璃岁月” 博客，请务必保留此出处http://11mihu.blog.51cto.com/6659352/1899504

需求：页面content分为左右两栏，左侧固定定位，滚动显示，右侧亦可滚动查看

标签：javascript   float   position   

原文地址：http://11mihu.blog.51cto.com/6659352/1899504