web-dev-qa-db-ja.com

固定された位置がヘッダーで機能しない

ページを下にスクロールすると、ナビゲーションがページの上部に固定される非常に単純な効果を作成しようとしています。私がしなければならないのは、現在持っているヘッダーに「位置:固定」を設定することだけです。何らかの理由で、「位置:絶対」要素と固定要素のように扱っています。私は同じ効果を持つページの他の要素でそれを試したので、問題を引き起こしているHTMLまたはCSSコードに何かを持たなければなりません。何か案は?

http://jsfiddle.net/apautler/yDhXG/1/embedded/result/

ヘッダーCSS

.nav-main  {overflow: visible; position: fixed;
            top: 0; left: 0; right: 0; height: 60px; width: 100%;}

注、サイトはレスポンシブなので、position: fixedは768pxで開始します。

38
Andrew

現時点では、 Chromeはposition:fixed変換下の要素 。 (コンテンツフリー)を削除します

-webkit-transform: translate3d(0, 0, 0);

そしてそれ 動作します

150
phihag