zoukankan      html  css  js  c++  java
  • 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;
    }

  • 相关阅读:
    python与常用模块pandas,numpy,matplotlib等库学习笔记-2019.02.07更新
    C++异常处理相关用法及底层机制
    C++ regex库常用函数及实例
    leetcode-2-两数相加(链表)
    leetcode-1-两数之和(三种方法)
    中序遍历(递归+迭代)
    C++实现四则运算器(带括号)
    C++实现四则运算器(无括号)
    Visual Studio2019 基于WSL的Linux C++开发
    Visual Studio 2019 基于Linux平台的C++开发
  • 原文地址:https://www.cnblogs.com/hun_dan/p/1968311.html
Copyright © 2011-2022 走看看