解决方案 为了解决这个问题,我最终使用了拆分解决方案:Chrome / Firefox / IE(现代版)的一套说明和iOS / Mac Safari的一套说明。
我是通过CSS浏览器选择器javascript代码完成的: http://rafael.adm.br/css_browser_selector/
这是我正在处理的页面:
主页是一个垂直的单页网站,我正在尝试创建一些视差效果,其中内容滑过图像和#34;登陆页面"向下滚动时的链接和文字。
这是基本的html结构:
<div id="home">
...
</div>
<div id="content1">
...
</div>
<div id="content2">
...
</div>
我希望#home中的内容在滚动时与背景保持一致,并且#content1,2,3等的所有内容都会滑过#home div的内容。
我似乎无法让它始终如一地运作。我已经设法让它在Safari上运行,但它会毫无理由地分解......它现在似乎在Chrome中工作正常......
更新1: 如下面的评论中所述,它似乎在Chrome和Firefox中运行。 Safara iOS给我带来了不稳定的结果,Safari for Mac OS似乎无法运行。
更新2: 似乎在固定div中添加负z-index可以解决大多数浏览器(至少是最新版本)的问题。
还要记住,您必须为div指定一个位置值,以确保z-index属性有效。