1

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

例如，在 Internet Explorer 上尝试http://jsfiddle.net/sVzfx/1/，你会看到我的问题（这在 Firefox 上不会发生，只是在 Opera 上做了一些不那么奇怪的事情）。在这个 jsfiddle 中，我使用滚动事件和一行代码来定位浮动元素：

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

（请参阅在某个点停止固定位置滚动？为此）

=> 滚动事件发生在滚动内容之后。因此，固定元素会延迟一些......

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

我尝试使用鼠标滚轮插件（请参阅http://brandonaaron.net/code/mousewheel/docs）。它使我能够在实际滚动之前做一些事情，而不是确定滚动的像素数......（我认为 deltaY 参数会返回它，但事实并非如此）。

你会怎么办？X（

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

4

1 回答 1

1

在我想到以相对元素而不是固定元素为基础之后，我想出了这个解决方案。请参阅http://jsfiddle.net/sVzfx/7/：

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') ;
    }
}) ;

另一个解决方案可能是http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

于 2013-03-06T21:38:51.247 回答