`
keimon
  • 浏览: 72834 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

IE兼容-模拟IE6的position:fixed属性

阅读更多

IE6不支持position:fixed属性,查找发现有几种方法可以实现该属性,但因为对js较熟悉,就用position:absolute和js来模拟ie6的fixed属性。
示例代码如下:
<style>
*{
  margin:0;
  padding:0;
}
#div1{
  position:relative;
  width:200px;
  height:200px;
  background-color:#666;
}
#div2{
  position:fixed;
  _position:absolute;
  width:100px;
  height:100px;
  background-color:blue;
  _top:0px;
  _left:0px;
}
</style>
</head>

<body>
<div id="div1">
  <div id="div2"></div>
</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 />

<script>
//ie6用position:absolute模仿position:fixed;
//-------made by keimon---------
$(function(){
  $(window).scroll(function(){
    var scrollT = $(document).scrollTop();
    $('#div2').text(scrollT);
  })
})
</script>

<!--[if IE 6 ]>
<script type="text/javascript" defer="defer" async="true">
$(function(){
  $(window).scroll(function(){
    var scrollT = $(document).scrollTop();
 $('#div2').css('top',scrollT+'px');
  })
})
</script>
<![endif]-->
</body>

0
4
分享到:
评论

相关推荐

    微信小程序----position:sticky

    微信小程序----position:sticky:通过position:fixed与position:relative切换。

    IE6实现position:fixed bug (固定窗口方法)的实例

    这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...

    javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...

    position:fixed;实现底层页面不跟随浮层模块滚动

    position:fixed;实现底层页面不跟随浮层模块滚动

    IE6不兼容position:fixed属性的解决办法分享

    及上下两边,共四种位置的固定,与以往的教程不同的地方是,它使用CSS表达式来兼容IE5、IE6,且避免了js模拟时,拖动滚动条时出现抖动的问题,另外在IE5或者怪癖模式下也完全正常,没有任何问题。如果你有更好的方案...

    JS 滚动事件[removed]与position:fixed写兼容IE6的回到顶部组件

    IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...

    position:fixed在ie6的使用

    position:fixed在ie6的使用,hack的使用办法

    IE6中的position:fixed定位兼容性写法分享

    切入正题,以下的IE6下CSS的兼容性写法: 复制代码代码如下:/* 修正IE6振动bug */html,* html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 头部固定 */...

    TMS.Component.Pack.6.8.2.0

    - New : Extra parameter added for grid.ScrollInView to define scroll position better - Improved : Handling of VCL styles - Fixed : Issue with Combobox inplace editor & grid OnKeyDown event - Fixed : ...

    IE6下的纯CSS完美position:fixed实现

    NULL 博文链接:https://piziwang.iteye.com/blog/424862

    css中position:fixed实现div居中上下左右居中

    实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看

    IE6支持position:fixed完美解决方法

    IE7已经支持position:fixed了,而我们的IE6呢?还继续使用js事件?消耗资源,破坏结构,画面闪耀。

    TMS Component pack v6.9.3.0

    - Fixed : Issue with position when is shadow applied Update : TAdvSmoothImageListBox v2.4.1.2 ---------------------------------------- - Fixed : Issue with text rendering of item text Update : ...

    跨浏览器的实践:position:fixed 层的固定定位

    一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之

    ie6 position:fixed解决方案

    可是要在IE6中实现固定效果,position: fixed;就不奏效了。 目前我所知的ie6下fixed的方案大概有纯css和expression+js两种,各有利弊。 1.纯css法 利用了ie6下html元素外面套的一个匿名元素,即 * ,利用选择器层级...

    详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    position:sticky用法介绍及浏览器兼容性

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来

    chrome中position:fixed对z-index的影响

    dom结构:正常的实现方式很容易:因为B本身就在A的后面,当A和B都设置了position属性(非static),且没有设置z-index的时候,其层叠关系是后面的元素覆盖前面的元素,这样只需要给A-child设置z-index属性值即可。...

    三星9305收索

    border-bottom:1px solid #e6e6e6}.bdsug-ala h3{line-height:14px;background:url(//www.baidu.com/img/sug_bd.png) no-repeat left center;margin:6px 0 4px 0;font-size:12px;font-weight:normal;color:#7b7b7b;...

    CSS 同级元素position:fixed和margin-top共同使用的问题

    主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Global site tag (gtag.js) - Google Analytics