Question

我试图复制类似于this的内容。

当你向下滚动时，div会随你滚动（position: fixed），直到它到达某个点，停止（position: absolute），当你继续向下滚动时，它会保留该位置在页面上（250px），直到您向上滚动以重新选择它。

现在我的小提琴做了所有事情，除了它没有保持它的位置＆＃34;下降＆＃34;相反，它会回到原来的位置。

想法？

Answer 1

您需要计算窗口的scrollTop值，然后将其作为top的值并将其设置为绝对值。

$('element').css({
    'top': $(window).scrollTop(),
    'position': 'absolute'
});

当你继续滚动时，scrollTop值会改变，所以你只能这样做一次。使用变量来跟踪元素的状态。据我所知，有三个：

相对
固定
绝对

使用此变量，您还可以通过仅在需要时设置类来减轻浏览器的压力。例如：

if( y > 100 && pos != 'fixed' ){

    pos = 'fixed';

    $('element').addClass('fixed');

}else if( y > 100 && pos != 'relative' ){

    pos = 'relative';

    $('element').addClass('relative');

}

希望有所帮助：）

Answer 2

我做了以下改动：

if (y >= socialTop & y <= 150) {
    $('#static-social').addClass('fixed');
} else {
    $('#static-social').removeClass('fixed');
}

要：

if (y >= socialTop & y <= 150) {
    $('#static-social').css('marginTop', $(this).scrollTop());
}

这确保了元素根据窗口的位置保持在页面的顶部，所以当你向后滚动它时，它就离开了它的位置。

停止在某一点滚动

2 个答案: