位置：固定と変換 - 通常の固定動作を返す方法？

Question

私はtransform: translateZ(0);をモバイルフィックスとして使用します（私はdivを常にレンダリングする必要があります）。 transformは別のコンテキストを作成し、今度はfixed divの高さは、transformがないため、ビューポートの高さではなく、親の高さに依存します。

私はtransformが必要ですが、通常のfixedの動作も必要です。私は何をすべきか？

Answer 1

この「問題」についてChromeにバグレポートがたくさんありました。スティッキープラグインを書くときに同じ問題が発生しましたが、これは実際には正常な動作です。これは、transformがW3 specsに従って独自の座標系を使用するためです。基本的には、要素は自身の固定された位置に対して固定された位置になります。残念ながら、これについて何もできません。文書に関連して -

解決策

あなたの問題を解決する方法は、「スティッキー」要素にabsolute位置を与えることです。次に、JavaScriptを使用して要素の位置を変更します。線に沿って何か：

var element = document.getElementById('element'); 

window.addEventListener('scroll', function() { 
    requestAnimationFrame(setTop); 
}); 

function setTop() { 
    element.style.top = window.pageYOffset; 
} 

あなたはまだ何の問題もなくtransformプロパティを使用することができるしている一方で、それは、固定位置を持っているかのように要素の動作この方法です。