http://workshop.wpcoder.com/daniel/tvexperts/
在Chrome浏览器中,如果您点击“Production”,然后再点击“Contact”,则fixed定位的标题栏会消失,但是当您滚动鼠标时,它会重新出现。我不知道原因是什么,目前只能在Safari和Chrome浏览器中检测到此问题,但Firefox浏览器没有这个问题,所以我认为这是一个Webkit浏览器的bug。
http://workshop.wpcoder.com/daniel/tvexperts/
在Chrome浏览器中,如果您点击“Production”,然后再点击“Contact”,则fixed定位的标题栏会消失,但是当您滚动鼠标时,它会重新出现。我不知道原因是什么,目前只能在Safari和Chrome浏览器中检测到此问题,但Firefox浏览器没有这个问题,所以我认为这是一个Webkit浏览器的bug。
解决此问题的一种方法是将固定位置的元素强制进入其自己的渲染层。 可以通过应用3D变换来实现:
.navbar-fixed-top {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
希望这能有所帮助。
实际上,如果您仔细观察,Firefox也有同样的错误。不同之处在于它显示了来自先前链接的较少内容。也许您的问题可以通过在CSS中定义链接div的min-height值来解决。
div#contact {
min-height:700px;
height:auto
}
在本地测试后,我看到了真正的问题 :). 我创建了一个correction.css文件,并在Mac OS X上的Opera 11、Safari 5、Firefox 3.6、Firefox 4.0 beta 11和Chrome 9中进行了测试。文件内容如下:
html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */
对我来说,高度调整没有任何作用。对于固定位置元素在Chrome中消失的问题,解决方法是:
window.scrollTo(window.pageXOffset,window.pageYOffset-1);
默认情况下,Blink和WebKit将固定位置元素提升到合成层中。在Safari中,无需提升固定位置元素,因为它们已经是合成的。
你需要做的是相反的。您需要使用translateZ(0)提升所有非固定位置元素:
http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb
window.scrollTo(window.pageXOffset,window.pageYOffset-1)
。它会将页面向上滚动一个像素,从而解决标题消失的问题。(我的第一个建议是错误的,抱歉。) - pimvdb