11

我正在用这段代码创建一个轻微的视差效果。除了 IE，一切都很好，除了 IE。我使用的是 IE 9。

Jsfiddle-javascript

Jsfiddle-jQuery

<div id="head"> i </div>
<div id="subHead"> can </div>
<div id="content">  haz </div>

Javascript

window.onscroll = function(ev){
  var subHead = document.getElementById('subHead'),
      topHeight = document.getElementById('head').offsetHeight;

  subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px';
};

CSS

#head, #subHead{
    position: fixed;           
    height: 80px;    
    width: 100%;
    display: block;
    background: #c00;
    left: 0;
    top: 0;
    z-index: 10;
}

#subHead{
    z-index: 4;
    background: #cd0; 
    top: 80px;
}

#content{
    position: relative;
    z-index: 6;
    height: 1000px;
    background: #eee;
    margin-top: 160px;
}

我尝试在谷歌上搜索一些跨浏览器技巧，但徒劳无功...有什么方法可以让它在 IE 中工作吗？非常感谢。

编辑：

目的：当用户滚动时，使 1 个 div 的移动速度比另一个慢。

逻辑：通过 css 固定 div 并通过 javascript http://jsfiddle.net/MRbWY/11/更改其位置

IE 中的错误。javascript 不起作用。因此 div 仅保持固定

4

1 回答 1

3

document.body.scrollTop 总是读零，有点挖掘这个问题，你想document.documentElement.scrollTop用于 IE。

更新了你的小提琴

于 2013-03-05T11:36:30.823 回答