• fixed解决方案


    目前网上有的比较多的是这种解决方案(纯CSS):
    html{overflow:hidden;}
    body{height:100%;overflow:auto;}
    #rightform form{position:absolute;right:30px;top50px;}
    这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成“浮动”的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。
    <!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=gb2312" />
    <title>IE6 fixed</title>
    <style type="text/css">
    *
    {
    margin: 0px;
    padding: 0px;
    }
    body {
    _background-image: url(about:blank); /*用浏览器空白页面作为背景*/
    _background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/
    }
    #topNav {
    980px;
    z-index: 100; /*设置浮动层次*/
    overflow: visible;
    position: fixed;
    top: 50px; /* 其他浏览器下定位,在这里可设置坐标*/
    _position: absolute; /*IE6 用absolute模拟fixed*/
    _top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
    /* documentElement.scrollTop 设置浮动元素始终在浏览器最顶,可以加一个数值达到排版效果 */
    background-color:#0000FF;
    height: 31px;
    }
    .show{
    position:absolute;
    top:500px;
    left:400px;
    border:#ff0000 1px solid;
    }
    </style>
    </head>
    <body>
    <div class="jd_menu" id="topNav">1111</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="show">show</div>
    </body>
    </html>

    只实现了垂直方向的fixed。若要实现水平方向的fixed,设置_left:expression(documentElement.scrollLeft + "px");

    利用给<body>设置固定的背景,防止滚动条滚动时的闪动;如果<body>中要设置滚动的背景而产生冲突,可以把代码写在html选择器里面,如:
    html {
    _background-image: url(about:blank);
    _background-attachment: fixed; /* prevent screen flash in IE6 */
    }
    body {
    background-image: url(1.jpg);
    background-attachment: scroll;
    }

  • 相关阅读:
    美团数据治理参考
    Ignite(三): Ignite VS Spark
    Ignite(二): 架构及工具
    Sqlserver 计算两坐标距离函数
    Ignite(一): 概述
    IMDG
    锂电池不一致而产生危害
    平均数_中位数_众数在SqlServer实现
    怎样给孩子取一个好名字?搜狗“有名堂”大数据支招
    eclipse导入外部jar包
  • 原文地址:https://www.cnblogs.com/hun_dan/p/1968311.html
Copyright © 2020-2023  润新知