固定元素在Chrome中消失

小编典典

固定元素在Chrome中消失

css

在我建立的网站上滚动时，使用CSS属性position: fixed可以按预期方式将导航栏保持在页面的顶部。

但是，在Chrome浏览器中，如果您使用导航栏中的链接，该链接 _有时会_消失。通常，您单击的项目仍然可见，但并非总是可见。有时整个事情消失了。左右移动鼠标将使元素的一部分退回，而使用滚轮或箭头键滚动只需单击一次即可将元素退回。您可以在上（间歇地）看到它的发生-
您可能必须单击几次导航链接，才能看到它的发生。

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

我遇到了这个问题，但修复程序根本不适合我。似乎是webkit的问题，因为IE和Firefox正常工作。

这是一个已知问题，还是可以使固定元素可见的修补程序？

更新：

top: 0;我尝试过只有效果元素，并且效果bottom: 0;正常。

阅读 460

2020-05-16

共1个答案

小编典典

这是一个尚待解决的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查找到的标签。

2020-05-16