77

私が構築した Web サイトをスクロールすると、CSS プロパティを使用するposition: fixedと期待どおりに動作し、ページの一番上にナビゲーション バーが表示されます。

ただし、Chrome では、ナビゲーション バーのリンクを使用すると、リンクが消えることがあります。通常、クリックした項目は引き続き表示されますが、常に表示されるわけではありません。時々、全体が消えます。マウスを動かすと要素の一部が戻り、スクロール ホイールまたは矢印キーで 1 回クリックするだけで要素が元に戻ります。https://nikeplusphp.charanj.itで (断続的に) 発生しているのを確認できます。発生するのを確認するには、ナビゲーションのリンクを数回クリックする必要がある場合があります。

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

この質問に出くわしましたが、修正はまったく機能しませんでした。IE と Firefox は正常に動作するため、Webkit の問題のようです。

これは既知の問題ですか、それとも固定要素を表示し続けるための修正はありますか?

アップデート：

top: 0;、私が試した効果要素のみがbottom: 0;期待どおりに機能します。

4

13 に答える 13

205

要素に追加-webkit-transform: translateZ(0)しposition: fixedます。これにより、Chrome はハードウェア アクセラレーションを使用して固定要素を継続的に描画し、この奇妙な動作を回避します。

このhttps://bugs.chromium.org/p/chromium/issues/detail?id=288747の Chrome バグを作成しました。これが注目を集めることができるように、スターを付けてください。

于 2013-09-12T12:18:50.357 に答える
46

これは私のためにそれを修正します：

html, body {height:100%;overflow:auto}
于 2013-01-28T19:34:52.883 に答える
8

上記のオプションは、提供された 2 つのソリューションを混合するまで機能しませんでした。

固定要素に以下を追加することで動作しました。基本的に、z-indexも必要でした：

-webkit-transform: translateZ(0);
z-index: 1000;
于 2015-03-17T00:20:18.060 に答える
2

これはまだ解決されていない webkit の問題です。奇妙なことに、#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

于 2012-07-06T15:44:04.247 に答える
0

上記のどれもまったく機能しなかった場合はどうなりますか? スティッキー ヘッダー + モバイル サイド メニュー プッシュ コンテンツの単純なケース。

固定要素 (スティッキー ヘッダー) が変換されるのを回避する方法を見つけようとしていますが、この場合、適切な代替手段はありません。

そのため、これまでのところスコープに関する回避策がないため、固定要素の絶対位置を再計算することを選択した JS の代替手段があります。ここを参照してください: https://stackoverflow.com/a/21487975/2012407

于 2016-07-29T16:46:55.857 に答える