固定元素在Chrome中消失
在我build立的网站上滚动时，使用CSS属性position: fixed按预期工作，使导航栏保持在页面的最顶端。
但是，在Chrome中，如果使用导航栏中的链接，它有时会消失。 通常，您点击的项目仍然可见，但并非总是如此。 有时整个事情消失。 移动鼠标可以返回元素的一部分，只需点击一下鼠标就可以滚动滚轮或方向键。 你可以在http://nikeplusphp.org上看到它的发生（intermitently） – 你可能需要点击几个导航链接几次才能看到它发生。
我也尝试玩z-index和可见性/显示types，但没有运气。
我遇到了这个问题，但修复程序根本不适用于我。 似乎是一个webkit的问题，因为IE和Firefox工作得很好。
这是一个已知的问题，还是有修复，保持固定的元素可见？
更新：
只影响有top: 0;元素top: 0; ，我试过了bottom: 0; 并按预期工作。
添加-webkit-transform: translateZ(0)到position: fixed元素。 这迫使Chrome使用硬件加速来连续绘制固定的元素，并避免这种奇怪的行为。
我为这个https://bugs.chromium.org/p/chromium/issues/detail?id=288747创build了一个Chrome的bug。; 请明星，这可以得到一些关注。
这为我解决了这个问题：
html, body {height:100%;overflow:auto}
我遇到了与Chrome相同的问题，它似乎是一个错误，当页面内部发生太多时，我可以通过将下面的转换代码添加到固定位置元素来修复它（ transform: translateZ(0);-webkit-transform: translateZ(0); ）强制浏览器使用硬件加速访问设备的graphics处理单元（GPU）使像素飞行。 另一方面，Web应用程序运行在浏览器的上下文中，这使软件可以执行大部分（如果不是全部）的渲染，从而导致转换的function减弱。 但是networking一直在追赶，大多数浏览器厂商现在都通过特定的CSS规则来提供graphics硬件加速。
使用-webkit-transform：translate3d（0,0,0）; 将启动GPU进行CSS转换，使其更平滑（更高的FPS）。
注意： translate3d（0,0,0）根据所看到的不做任何事情。 它将对象在x，y和z轴上移动0px。 这只是一个强制硬件加速的技术。
#element { position: fixed; background: white; border-bottom: 2px solid #eaeaea; width: 100%; left: 0; top: 0; z-index: 9994; height: 80px; /* MAGIC HAPPENS HERE */ transform: translateZ(0); -webkit-transform: translateZ(0); }
上述选项在我混合提供的两种解决scheme之前并不适用于我。
通过添加以下内容到固定的元素，它的工作。 基本上z-index也是我需要的：
-webkit-transform: translateZ(0); z-index: 1000;
这是一个尚未解决的webkit问题，奇怪的是，使用JavaScript进行跳转，而不是使用＃url值，不会导致问题。 为了解决这个问题，我提供了一个JavaScript版本，它取得了锚值，并find了具有该ID的元素的绝对位置并跳转到：
var elements = document.getElementsByTagName('a'); for(var i = 1; i < elements.length; i++) { elements[i].onclick = function() { var hash = this.hash.substr(1), elementTop = document.getElementById(hash).offsetTop; window.scrollTo(0, elementTop + 125); window.location.hash = ''; return false; } }
我可以进一步改进，使它只是只查找以#开头的链接，而不是它finda标签。
完整的解决scheme/所有浏览器
HTML代码
<body> <div class="wrapper"> <div class="static"> <div class="header"> </div> </div> <div class="content"> </div> </div> </body>
CSS样式
body { background: #000000; margin: 0px auto auto auto; padding: 0px; max-width: 830px; height:100%; overflow:auto; } .wrapper { margin: 0px auto; height: 89%; width: 830px; } .static { width: 815px; z-index: 2; height: 145px; position: fixed; padding-left: 0px; margin: auto; } .content { width: 820px; float: left; position: relative; top: 125px; margin: auto; padding-top: 25px; } .header { height: 150px; width: 820px; margin-left: auto; margin-right: auto; margin-top: -2px; padding: 5px; overflow:auto; }
如果上面的答案都没有为你工作，确保你不是像我这样的虚拟，并有溢出：隐藏; 设置在固定的元素:(
如果以上都不起作用呢？ 简单的情况下粘头+手机端菜单推送内容。
我试图find一种方法来避免固定元素（粘头）被翻译，但在这种情况下，没有什么是一个好的select。
所以到目前为止，在范围上没有解决方法，我select重新计算固定元素的绝对位置。 看到这里： https : //stackoverflow.com/a/21487975/2012407
在另一种情况下，我遇到了同样的问题。 这是因为在多个地方使用相同的ID。 例如我用#full 2 divs。
看来，Mozilla和IE在多种情况下支持使用相同的ID。 但铬没有。 它在我的情况下反应与固定元素disappering。
只是删除身份证解决了这个问题。
如果添加后不起作用
-webkit-transform：translateZ（0）
比也添加
用户可扩展=无
在视口元
来源于此
它为我工作
