Chromeで固定要素が消える

質問

私が作ったウェブサイトで、スクロールするときにCSSプロパティ position: fixed を使用すると、ページの最上部にナビゲーション バーを維持するために期待どおりに機能します。

しかし、Chrome では、ナビゲーション バーのリンクを使用すると、それは ときどき が消えます。通常は、クリックした項目は表示されたままですが、いつもそうとは限りません。全体が消えてしまうこともあります。マウスを動かすと要素の一部が戻り、スクロールホイールや矢印キーで1クリックだけスクロールすると要素が戻ってきます。この現象は、（断続的に）以下のサイトで見ることができます。 https://nikeplusphp.charanj.it - をクリックすると、ナビゲーション リンクのいくつかを数回クリックする必要があるかもしれません。

私はまた、z-indexと可視性/表示タイプで遊んでみましたが、うまくいきません。

私は この質問 を見つけましたが、その修正は私のためにまったく機能しませんでした。IEとFirefoxは問題なく動作するので、webkitの問題であるように思われます。

これは既知の問題なのでしょうか、それとも固定要素を表示し続けるための修正があるのでしょうか。

更新しました。

を持つ要素にのみ効果があります。 top: 0; を持つ要素にしか効果がありません。 bottom: 0; を試してみたところ、期待通りに動作しました。

どのように解決するのですか？

これはまだ解決されていない webkit の問題で、奇妙なことに JavaScript でジャンプを行い、むしろ # の url 値を使用するのではなく、JavaScript でジャンプしても問題は発生しません。この問題を克服するために、私は、アンカー値を取り、その ID を持つ要素の絶対位置を見つけ、そこにジャンプする JavaScript バージョンを提供しました。

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 タグではなく