jquery：$（ウィンドウ）に対して 'margin-left'または 'left'を計算する.scrollLeft（）はFirefoxでは実際にはギザギザです - .animate（）または.css（）を使用します

Question

私は水平方向にスクロールするウェブサイトを持っていますユーザーが右にスクロールするときに常に枠内にとどまりたいブロックがあります。 Webkitブラウザでは完全にスムーズに見えますが、Firefoxではぎこちなくて、IEは本当に気にしません。

function fixMyId(){ 
    $('#myId').css({'margin-left': 150 + $(window).scrollLeft()}); 
} 

function fixMyIdAlt(){ 
    $('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300); 
} 

次に、ウィンドウスクロールでトリガーしました。

スクロールを平均化する最良の方法は何でしょうか。スクロールするのに非常に多くの秒数またはピクセルが機能を起動するか、またはスクロールを停止するとブロックが所定の位置にアニメーション化されます。私はdelay（）で試してみましたが、何もしません。そして、この1は愚かに見える（プラス私はクランチングのこの種のオーバーヘッドが何であるか見当がつかない）：

function fixMyIdStupid(){ 
    window.scrollCounter++; 
    if(window.scrollCounter % 20 == 0) $('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300); 
} 

だから私は何をしますか？ setTimeoutとsetIntervalが必要かもしれませんが、それらは常に私の頭を傷つけます。

EDIT：ここでアクションで、それのjsfiddleです：http://jsfiddle.net/xsxSq/

＃のf0f広場が#myIdです。

Answer 1

私もこのようなことをやろうとしましたが、問題はスクロールイベントがあなたが望むほどには発射されないということです。素晴らしい回避策は、計算機能をmousemoveイベントに登録することでした。そのため、LOTがトリガーされます。しかし一方で、私は別の解決策を思いつきました。

オブジェクトをposition:fixedオブジェクトにして、サイズ変更時に何が起こるかを計算してみましょう。あなたが実際に位置-xを作成しようとしているからです。位置-y：絶対値である。

私は実際に反対の種類のものについて次のことを行いました。ブロックは、x文書の真ん中にある必要がありますが、yでは固定されています。このコードをコピー

$(document).ready(function() 
{ 
    replaceFixed(); 

    $(window).resize(replaceFixed); 
    $('#content').ajaxSuccess(replaceFixed); 
    $(window).scroll(replaceFixed); 

    function replaceFixed() 
    { 
     var jEl = $('#centeredFixedContainer'); 

     var winW = $(window).width(); 
     var docW = $(document).width(); 
     var scrL = $(window).scrollLeft(); 
     var divW = jEl.width(); 

     var result = 0; 

     // window bigger than the element 
     if(winW > divW) 
     { 
      result = -scrL + ((docW-winW)/2); 
     } 
     else 
     { 
      result = $('#mainContainer').offset().left - scrL; 
     } 


     jEl.css('left',result); 
    } 
}); 

はあなたのソリューションを与えることはありませんが、あなたの問題を見て別の方法を示します。