边导航不能准确到达指定位置停住

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
*{ padding:0; margin:0;}
ul { list-style:none;}
/*边导航*/
.sidebar { width:121px; font-size:14px;
    margin-left:510px; 
    max-width:121px;
    max-height:300px;
    width:expression(document.body.clientWidth > 121?"121px": "auto" );
    height:expression(document.body.clientHeight > 300?"300px": "auto" );
    overflow:hidden;
    -webkit-transform:scale(0.01, 0.01);
    -moz-transform:scale(0.01, 0.01);
    -o-transform:scale(0.01, 0.01);
    -ms-transform:scale(0.01, 0.01);
    transform:scale(0.01, 0.01);
    -webkit-transition:all 400ms linear 0;
    -moz-transition:all 400ms linear 0;
    -o-transition:all 400ms linear 0;
    -ms-transition:all 400ms linear 0;
    transition:all 400ms linear 0;
    visibility: hidden;
    z-index:97;
    background:#469dcd;
    height:300px;
  }
.sidebar_top {
    visibility: hidden;
    _display:none;
    position:fixed;
    left:50%;
    margin-left:510px;
    bottom:50px;
    _bottom:0px;
    _position: absolute;
 _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-130);
}
.sidebar_bottom {position:absolute; left:50%; bottom:0; margin-left:510px; }
.sidebar_show { visibility: visible;
    _display:block;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1));
    -ms-transform:scale(1);
    transform:scale(1);
}

.sidebar ul li { width:121px; height:71px; font-size:14px;  line-height:71px; text-align:center; border-bottom:1px solid #fff; background:#469dcd; }
.sidebar ul li.top { height:32px; line-height:32px; position:relative;}
.sidebar ul li.top a {height:32px; line-height:32px;}
.sidebar ul li a { display:inline-block; width:121px; height:71px;  color:#fff; }


/*边导航END*/
</style>

</head>

<body>
<div style="height:3000px; position:relative;">
<!-- 边导航菜单开始-->
        <div class="sidebar sidebar_top" id="rollBar" >
        
        </div>
<!-- 边导航菜单结束-->

</div>
<div id="foot" style="height:1400px; background:#999;">

</div>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script> 

<script>
 //树形导航条
$.myPlugin = {
 rollBar:function(obj , end){
var rollId = $(obj);  
var end=$(end)      
var rollIdH = rollId.height() 
var windowH = $(window).height()
var rollTOP = end.offset().top - rollIdH;

    $(window).scroll(function(){        
    var scrollTop = $(window).scrollTop();
    document.title=scrollTop
        if(scrollTop >= windowH){ 
        rollId.addClass('sidebar_show')
            if (scrollTop > rollTOP)
            {    
                rollId.addClass('sidebar_bottom')
                rollId.removeClass('sidebar_top')
            }else{
                rollId.removeClass('sidebar_bottom')
                rollId.addClass('sidebar_top')
            }
            }else{
            rollId.removeClass('sidebar_show')
        }
     }
    );
    }
}

//树形导航条--结束

$(function(){

//边导航     
    $.myPlugin.rollBar('.sidebar' ,'#foot' );   
}) 
 

</script>
</html>
【热门文章】