如何让一个div固定悬浮在浏览器顶部?类似这样的

ETJojo 2013-07-20 04:25:29
刚刚看见 http://www.wpxap.com/ 顶部用户信息栏是个固定位置的div,网页可以在这个div下面滚动,这个是如何实现的?
...全文
12832 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
w_aimee 2013-07-25
  • 打赏
  • 举报
回复
<div id="GoToTop" style="position: fixed; bottom: 40px; right: 35px;"> <a href="#goTop"> <img src="/img/lanren_top.jpg" /></a></div> 类似本论坛右下角的回到顶部
md5e 2013-07-24
  • 打赏
  • 举报
回复
在底部
<!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;
}
.menu{
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}
</style>
<script src="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() + jQuery(window).height() - jQuery(".menu").height()<= _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() + jQuery(window).height() - jQuery(".menu").height());
}
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="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>
<div class="menu" style="width:500px; height:25px; background-color:#fff;"><a href="javascript:void(0)" onclick="jQuery(window).scrollTop(0);">返回顶部</a></div>
</body>
</html>
md5e 2013-07-24
  • 打赏
  • 举报
回复
在顶部 <!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>
myhope88 2013-07-24
  • 打赏
  • 举报
回复
上面已说得很清楚了
joyhen 2013-07-24
  • 打赏
  • 举报
回复
uinatlex 2013-07-24
  • 打赏
  • 举报
回复
那个还在用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标识'_'始终在最后
  • 打赏
  • 举报
回复
position: fixed; 不过ie6不支持,要用js+绝对定位
good-code 2013-07-23
  • 打赏
  • 举报
回复
引用 2 楼 uinatlex 的回复:

div{width: 100%; height: 30px; position: fixed; top: 0;opacity:0.75;}
已给出最简单有效的答案
uinatlex 2013-07-20
  • 打赏
  • 举报
回复

div{width: 100%; height: 30px; position: fixed; top: 0;opacity:0.75;}
Banianer 2013-07-20
  • 打赏
  • 举报
回复

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

62,025

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧