jQuery：在滚动上移动元素，在某个点停止，跨浏览器兼容

我试图在我的页面上有一个固定的元素，当用户滚动时，它将跟随其余的内容

例如，在internet explorer上尝试一下，您会看到我的问题（在firefox上不会出现这种情况，只是在opera上做了一些不那么奇怪的事情）。在这个JSFIDLE中，我使用scroll事件和一行代码来定位浮动元素：

$(window).scroll(function() {
    $("#floatingContent").css("top", Math.max(maxTopPosition, startingPoint - $(this).scrollTop()));
});

（有关此信息，请参见）

=>滚动事件在滚动内容后发生。因此，固定元素具有一定的延迟

为了获得最佳的用户体验，没有此类行为至关重要。我的想法是计算滚动的像素数，在滚动其余内容之前定位元素。我认为，用户不会看到该元素位于其他元素之前，因为它太快了。问题是，我该怎么做

我尝试使用鼠标滚轮插件（请参阅）。它使我能够在实际滚动之前做一些事情，而不是确定滚动的像素数。。。（我原以为deltaY参数会返回该值，但事实并非如此）

你会怎么做？x（

---

也许我应该让元素成为相对元素，并在它到达页面顶部后将其更改为固定元素……因此，在滚动之前忘记移动它。

在我想到将相对元素作为基础而不是固定元素后，我提出了此解决方案。请参阅：

var fixedElement=false；
var changingMoment=250；//从顶部开始我们要修复或取消固定的像素数
$（窗口）。滚动（函数（）{
//浮动内容标记让我们知道元素将在何处更改
//从固定到相对，反之亦然
var distanceFromTop=$（“#floatingContentMark”）.offset（）.top-$（this.scrollTop（）；
if（（与顶部的距离=变化力矩和固定元件））
{//我们要么从上到下，触发了相同的事件
fixedElement=！fixedElement；
$（'#floatingContent'）。触发器（'fixElement'）；
}
});
//可能在两个不同的处理程序中调度，修复和取消修复。
$（'#floatingContent'）.bind（'fixElement'，function（）{
if（$（this.css（'position'）！='fixed'）{
$（this.css（'position'，'fixed'）；
$（this.css（'top'，changingMoment）；
}
否则{
$（this.css（'position'，'relative'）；
$（this.css（'top'，'auto'）；
}
}) ;

---

另一个解决方案可能是

在我想到用相对元素作为基础而不是固定元素后，我提出了这个解决方案。请参见：

var fixedElement=false；
var changingMoment=250；//从顶部开始我们要修复或取消固定的像素数
$（窗口）。滚动（函数（）{
//浮动内容标记让我们知道元素将在何处更改
//从固定到相对，反之亦然
var distanceFromTop=$（“#floatingContentMark”）.offset（）.top-$（this.scrollTop（）；
if（（与顶部的距离=变化力矩和固定元件））
{//我们要么从上到下，触发了相同的事件
fixedElement=！fixedElement；
$（'#floatingContent'）。触发器（'fixElement'）；
}
});
//可能在两个不同的处理程序中调度，修复和取消修复。
$（'#floatingContent'）.bind（'fixElement'，function（）{
if（$（this.css（'position'）！='fixed'）{
$（this.css（'position'，'fixed'）；
$（this.css（'top'，changingMoment）；
}
否则{
$（this.css（'position'，'relative'）；
$（this.css（'top'，'auto'）；
}
}) ;

另一个解决办法可能是

var fixedElement = false;
var changingMoment = 250; // numbers of pixels from top where we want to fix or unfix
$(window).scroll(function() {
    // floatingContentMark lets us know where the element shall change 
    // from fixed to relative and vice versa
    var distanceFromTop = $("#floatingContentMark").offset().top - $(this).scrollTop();    
    if ((distanceFromTop <= changingMoment && !fixedElement) || 
        (distanceFromTop >= changingMoment && fixedElement)) 
    {    // either we came from top or bottom, same event triggered
         fixedElement = !fixedElement;
         $('#floatingContent').trigger('fixElement');
    }
});

// maybe dispatch in two different handlers, fix and unfix.
$('#floatingContent').bind('fixElement', function() {
    if ($(this).css('position') != 'fixed') {
        $(this).css('position', 'fixed') ;
        $(this).css('top', changingMoment ) ;
    }
    else {
        $(this).css('position', 'relative') ;
        $(this).css('top', 'auto') ;
    }
}) ;