javascript - jquery:计算相对于 $(window).scrollLeft() 的 'margin-left' 或 'left' 在 Firefox 中确实是锯齿状的——使用 .animate() 或 .css()

Question

我有一个水平滚动的网站，我有一个 block ，我想在用户向右滚动时始终留在框架中。它在 webkit 浏览器中看起来非常流畅，但在 Firefox 中非常参差不齐，我不太关心 IE。

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

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

然后我在窗口滚动时触发它。

平均滚动的最佳方法是什么，这样也许每隔这么多秒或滚动像素它就会触发该函数，或者在停止滚动时它使 block 动画到位？我尝试玩 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 方 block 是#myId。

Answer 1

我也试过做这样的事情，问题是滚动事件没有像你想要的那样触发。一个很好的解决方法是将计算函数订阅到 mousemove 事件，因此它会触发很多。但另一方面，我想出了另一个解决方案。

为什么不扭转局面，问问自己:让我们将其设为 position:fixed 对象并计算调整大小时发生的情况。因为您实际上是在尝试创建一个 position-x:fixed;和一个 position-y:absolute;

我实际上做了以下相反的事情。必须恰好位于 x 文档中间的 block ，但在 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);
    }
});

复制此代码不会为您提供解决方案，但会指明另一种看待问题的方式。