Question

我有一个水平滚动的网站，我有一个块，我想在用户向右滚动时始终保持在框架中。它在webkit浏览器中看起来非常流畅，但在Firefox中疯狂参与其中并且我并不真正关心IE。

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

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

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

什么是平均滚动的最佳方法，因此可能每隔这么多秒或滚动像素会触发该功能，或者在停止滚动时它会将块动画到位？我试过玩延迟（），但这没有做任何事情。这个看起来很愚蠢（加上我不知道这种运算的开销是多少）：

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

那我该怎么办？可能需要setTimeout和setInterval，但那些总会让我头疼。

编辑：以下是它的实际效果：http://jsfiddle.net/xsxSq/

＃f0f square是#myId。

Answer 1

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

为什么不扭转局面并问自己：让它成为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);
    }
});

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

jquery：计算'margin-left'或'left'相对于$（window）.scrollLeft（）在Firefox中实际上是锯齿状的 - 使用.animate（）或.css（）

1 个答案: