amcharts Pie Simple

HTML

<div tag="continer" style="width:200px;border:10px solid green;position:relative">
<div tag="left" style="width:80px;border:5px solid red" class="top" topClass="top" bottomClass="bottom">
    <div style="width:80px;height:120px;border:1px dashed green;">1</div>
    <div style="width:80px;height:120px;border:1px dashed green;">2</div>
    <div style="width:80px;height:120px;border:1px dashed green;">3</div>
    <div style="width:80px;height:120px;border:1px dashed green;">4</div>
    <div style="width:80px;height:120px;border:1px dashed green;">5</div>
    <div style="width:80px;height:120px;border:1px dashed green;">6</div>
    <div style="width:80px;height:120px;border:1px dashed green;">7</div>
    <div style="width:80px;height:120px;border:1px dashed green;">8</div>
    <div style="width:80px;height:120px;border:1px dashed green;">9</div>
</div>

<div tag="right" style="width:80px;border:5px solid blue;" class="top1" topClass="top1" bottomClass="bottom1">
    <div style="width:80px;height:120px;border:1px dashed green;">1</div>
    <div style="width:80px;height:120px;border:1px dashed green;">2</div>
    <div style="width:80px;height:120px;border:1px dashed green;">3</div>
    <div style="width:80px;height:120px;border:1px dashed green;">4</div>
    <div style="width:80px;height:120px;border:1px dashed green;">5</div>
    <div style="width:80px;height:120px;border:1px dashed green;">6</div>
    <div style="width:80px;height:120px;border:1px dashed green;">7</div>
    <div style="width:80px;height:120px;border:1px dashed green;">8</div>
    <div style="width:80px;height:120px;border:1px dashed green;">9</div>
    <div style="width:80px;height:120px;border:1px dashed green;">11</div>
    <div style="width:80px;height:120px;border:1px dashed green;">12</div>
    <div style="width:80px;height:120px;border:1px dashed green;">13</div>
    <div style="width:80px;height:120px;border:1px dashed green;">14</div>
    <div style="width:80px;height:120px;border:1px dashed...

CSS

.top{position:absolute;top:0;left:0}
.top1{position:absolute;top:0;right:0}
.middle{position:fixed;bottom:0;}
.bottom{position:absolute;bottom:0;left:0}
.bottom1{position:absolute;bottom:0;right:0}

JavaScript

//需要固定的div
target1=$('div[tag="left"]');
target2=$('div[tag="right"]');
target=target1;
heigth=target1.height();
if(target1.height>target2.height){
    target=target2;
    height=target1.height();
}else{
    target=target1;
    height=target2.height();
}
height+=(5*2);//加上边框
$('div[tag="continer"]').css('height',height);
//显示高度
clientHeight=500;
t1botton=target.offset().top+target.height()-clientHeight;
t2botton=$('div[tag="continer"]').offset().top+$('div[tag="continer"]').height()-clientHeight;
left=target.offset().left;

window.onscroll = function(){
    var t = document.documentElement.scrollTop || document.body.scrollTop; 
    if(t>=t1botton&&t<t2botton){
        /*$('div[tag="left"]').css('position','fixed').css('left',0).css('bottom',0);
        $('div[tag="left-bg"]').css('position','static');*/
        target.removeClass();
        target.addClass('middle');        
        target.css('left',left);
    }else if(t>=t2botton){
        target.removeClass();
        target.addClass(target.attr('bottomClass')); 
        //target.css('left',null);
        //删除style属性中的left
        removeCss(target,'left');
        //target.removeCss('left');
    }else{
        /*$('div[tag="left"]').css('position','static');
        $('div[tag="left-bg"]').css('position','fixed');*/
        target.removeClass();
        target.addClass(target.attr('topClass'));
        //target.css('left',null);
        //删除style属性中的left
        removeCss(target,'left');
        //target.removeCss('left');
    }    
} 
/*
(function($){
    $.fn.removeCss=function(attr){
        var reg=new RegExp(attr+':.*;');
        var style=this.attr('style');
        style=style.replace(reg,'');
        this.attr('style',style);
    };
})(jQuery);*/
function removeCss(target,attr){
    var reg=new RegExp(attr+':.*;');
    var style=target.attr('style');
    style=style.replace(reg,'');
    target.attr('style',style);
}