Question

在我构建的网站上滚动时，使用CSS属性position: fixed按预期工作，以便在页面顶部保留导航栏。

但是，在Chrome中，如果您使用导航栏中的链接，有时会消失。通常，您点击的项目仍然可见，但并非总是如此。有时候整个事情都会消失。移动鼠标会带回元素的一部分，只需单击一下滚动滚轮或箭头键即可返回元素。您可以在http://nikeplusphp.org上看到它（间歇性地）发生 - 您可能需要点击一些导航链接几次以查看它。

我也尝试过使用z-index和可见性/显示类型，但没有运气。

我遇到了this question，但修复对我来说根本不起作用。似乎是一个webkit问题，因为IE和Firefox工作正常。

这是一个已知问题还是有修复可以保持固定元素的可见性？

更新

只有具有top: 0;的效果元素，我尝试bottom: 0;并按预期工作。

Answer 1

将-webkit-transform: translateZ(0)添加到position: fixed元素。这迫使Chrome使用硬件加速来连续绘制固定元素并避免这种奇怪的行为。

我为此https://bugs.chromium.org/p/chromium/issues/detail?id=288747创建了Chrome错误。请注明它以便引起注意。

Answer 2

这为我解决了这个问题：

html, body {height:100%;overflow:auto}

Answer 3

我遇到了与Chrome相同的问题，这似乎是一个错误，当页面内部有太多内容时，我可以通过将以下转换代码添加到固定位置元素来修复它，（ transform: translateZ(0);-webkit-transform: translateZ(0);）强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞起。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-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);
}

Answer 4

在我混合提供的两个解决方案之前，上述选项对我不起作用。

通过在固定元素中添加以下内容，它可以正常工作。基本上我也需要z-index：

-webkit-transform: translateZ(0);
z-index: 1000;

Answer 5

这是一个尚未解决的webkit问题，奇怪的是使用JavaScript跳转而不是使用# url值，不会导致问题。为了解决这个问题，我提供了一个JavaScript版本，它获取锚值并找到具有该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;
    }
}

我可以进一步优化这一点，并确保它只查找以#开头的链接，而不是找到它找到的a标记。

Answer 6

如果在添加

后无法正常工作

-webkit-transform：translateZ（0）

还要添加

用户可扩展=无

在viewport meta

上

来源here

它对我有用

Answer 7

我在不同的情况下遇到了同样的问题。这是因为在多个地方使用相同的id。例如，我使用了#full 2 divs。

似乎是mozilla和I.E.在多种情况下支持使用相同的id。但铬不是。在我的案例中，它与固定元素的消失有关。

只需删除id即可解决问题。

Answer 8

除了通过javascript调用模态

之外，它们都没有为我工作

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

除此之外，上述解决方案都没有解决我的问题。

Answer 9

我也遇到了同样的问题。用于网站的主页。我做了一个固定的页眉，并在前海报上使用了一张图片。一切正常。但是，当我更改海报图像的不透明度的那一刻，我的标题的位置就固定了：消失了。它存在于chrome开发人员工具中。但是在网站上完全透明。

我尝试了StackOverflow，W3shools和Geeke4geeks的所有解决方案。但是，如果一件事被解决，另一件事就搞砸了。

所以我刚打开photoshop并手动编辑了图像。然后将其发布在我的网站上。有效。但是，对于固定元素下的div而言，它仍然无效。

Answer 10

如果上述答案都不适合您，请确保您不是像我这样的假人，并且在固定元素上设置溢出：隐藏; :(

Answer 11

如果以上都没有工作怎么办？简单的粘贴标题+移动侧菜单推送内容。

我试图找到一种避免固定元素（粘性标题）被翻译的方法，但在这种情况下，没有什么是好的选择。

因为到目前为止还没有关于范围的解决方法，我选择了JS替代方案来重新计算固定元素的绝对位置。见这里：https://stackoverflow.com/a/21487975/2012407

Answer 12

这对我有用。将Overflow属性添加到最顶层的容器中，可以是Div或Form等。

div, form
{
  overflow:visible;    
}

固定元素在Chrome中消失

12 个答案: