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

转载于 2013-08-16 10:06:00 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hubing/p/3261425.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现的固定顶部导航栏效果。该方案在现代浏览器中利用CSS的fixed属性，并为IE6浏览器提供了兼容方案。通过jQuery监听滚动事件，确保导航栏在页面滚动时始终保持在顶部。

<!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>