如何让一个div固定悬浮在浏览器顶部？类似这样的
刚刚看见 http://www.wpxap.com/ 顶部用户信息栏是个固定位置的div，网页可以在这个div下面滚动，这个是如何实现的？
[解决办法]
<div id="d1" style="position:absolute;background:#eeeeee;border:1px dotted #000;">
<div><img src="..."/></div>
<div>content</div>
</div>
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
var ad=document.getElementById("d1");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
scrollImg();
</script>
[解决办法]
div{width: 100%; height: 30px; position: fixed; top: 0;opacity:0.75;}
[解决办法]
那个还在用IE6嘛
你要IE6
多加2句就完了
html { _background-image: url(about:blank); _background-attachment: fixed; }
div { width: 100%; height: 30px;position: fixed; top: 0; opacity: 0.75; _position: absolute; _bottom: auto; _top: expression(eval(document.documentElement.scrollTop)); }
hack标识'_'始终在最后
[解决办法]
源码及使用：http://blog.csdn.net/joyhen/article/details/8717653
[解决办法]
在顶部
<!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 runat="server">
<title></title>
<style>
*
{
margin:auto; text-align:center; padding:auto;
}
</style>
<script src="/Scripts/jquery-1.4.1.js"></script>
<script>
var _menu;
jQuery(document).ready(function () {
jQuery(window).scroll(function () {
var _offset = jQuery(".menu").offset();
if (jQuery(window).scrollTop() >= _offset.top) {
if (_menu == undefined) {
_menu = jQuery(".menu").clone(true).insertAfter(jQuery(".menu"));
jQuery(_menu).css("left", _offset.left);
jQuery(_menu).css("position", "absolute");
}
jQuery(_menu).css("top", jQuery(window).scrollTop());
}
else {
if (_menu != undefined) {
jQuery(_menu).remove();
_menu = null;
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="main">
<div style="width:500px; height:100px; background-color:Blue;"></div>
<div class="menu" style="width:500px; height:50px; background-color:Red;">这里是导航</div>
<div class="body" style="width:500px; height:1050px; background-color:Gray;">这里是内容</div>
</div>
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:CheckBox ID="CheckBox2" runat="server" />
</form>
<div style="width:16px; font-size:14px;">
如何让页面的字竖着显示
</div>
</body>
</html>