新浪微博顶部新评论提示层效果——position:fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fix顶部</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<style>
*{padding:0px ; margin:0px;}
.top_nav{width:100%; height:30px; background:#CCC;}
.fix_box{width:200px;  height:30px; background-color:#FFC; border:1px solid #F90;right:100px; top:10px; position:fixed; _position:absolute;}
</style>
<!--[if IE 6]>
<script>
$(function(){
    $(window).scroll(function() {
        var scrollsTop = $(this).scrollTop()+10;
        $(".fix_box").css("top",scrollsTop);
    })
})
</script>
<![endif]-->
</head>

<body>
<div class="top_nav">
    <div class="fix_box"></div>
</div>
<div style="height:800px;"></div>
</body>
</html>

 

posted @ 2013-08-16 10:06  北斗极星  阅读(297)  评论(0编辑  收藏  举报