js实现页面悬浮框

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.

当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        display:none;
    }

 
</style>
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 100){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

posted on 2015-11-14 18:47 miaoying 阅读(2987) 评论(1) 编辑收藏举报