固定元素在Chrome中消失 [英] Fixed element disappears in Chrome

问题描述

在我建立的网站上滚动时，使用CSS属性 position：fixed 按预期工作，将导航栏保留在页面顶部。 / p>

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

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

我遇到了这个问题，但修复没有为我工作。似乎是一个webkit的问题，因为IE和Firefox的工作很好。

这是一个已知的问题，还是有固定的元素可见？ b
$ b

更新：

只能影响 top：0; / code>，我尝试了 bottom：0; ，并且按预期工作。

解决方案

这是一个尚未解决的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 ），
 elementTop = document.getElementById（hash）.offsetTop;。 
 window.scrollTo（0，elementTop + 125）; 
 window.location.hash =''; 
 return false; 
} 
} 
  



我可以进一步细化，它只查找以＃开头的链接，而不是找到标签。

When scrolling on a website I've built, using the CSS property position: fixed works as expected to keep a navigation bar at the very top of the page.

In Chrome, however, if you use the links in the navigation bar it sometimes disappears. Usually, the item you've clicked on is still visible, but not always. Sometimes the entire thing disappears. Moving the mouse around brings back part of the element, and scrolling with the scroll wheel or arrow keys just one click brings the element back. You can see it happening (intermitently) on http://nikeplusphp.org - you might have to click on a few of the navigation the links a few times to see it happen.

I've also tried playing with the z-index and the visibility/display type but with no luck.

I came across this question but the fix didn't work for me at all. Seems to be a webkit issue as IE and Firefox work just fine.

Is this a known issue or is there a fix to keep fixed elements visible?

Update:

Only effects elements that have top: 0;, I tried bottom: 0; and that works as expected.

解决方案

This is a webkit issue that has yet to be resolved, oddly making the jump with JavaScript, rather than using the # url value, doesn't cause the problem. To overcome the issue, I supplied a JavaScript version that takes the anchor value and finds the absolute position of the element with that ID and jump to that:

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;
    }
}

I could refine this further and make it is that only it only looks for links beginning with a #, rather than ever a tag it finds.

这篇关于固定元素在Chrome中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！