怎么让一个div固定悬浮在浏览器顶部？类似这样的

2013-08-04

如何让一个div固定悬浮在浏览器顶部？类似这样的刚刚看见 http://www.wpxap.com/ 顶部用户信息栏是个固定位

如何让一个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>

热点排行

asp.net

怎么让一个div固定悬浮在浏览器顶部？类似这样的