jQuery：计算相对于$（window）的'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（）玩，但是那什么也没做。 而且这看起来很愚蠢（再加上我不知道这种处理的开销是多少）：

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

那我该怎么办？ setTimeout和setInterval可能是必需的，但这些总是使我头受伤。

编辑： 这是一个实际的jsfiddle： http : //jsfiddle.net/xsxSq/

＃f0f正方形是#myId。

Answer 1

我也尝试做这样的事情，问题是滚动事件没有按您希望的那样触发。 一个不错的解决方法是将计算功能预订给mousemove事件，因此它会触发很多。 但另一方面，我想出了另一种解决方案。

为什么不把事情转过来问自己：让它成为一个position:fixed对象并计算调整大小时会发生什么。 因为您实际上是在尝试创建位置x：fixed; 位置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);
    }
});

复制此代码不会给您解决方案 ，但会指出另一种解决问题的方法。