jquery - 在某个点停止滚动

Question

我正在尝试复制与此类似的内容。

当您向下滚动时，div 会随着您滚动 ( position: fixed) 直到它到达某个点并停止 ( position: absolute)，当您继续向下滚动时，它会保留页面上的该位置 ( 250px)，直到您向上滚动以选择它再次备份。

我到目前为止所拥有的。

现在我的小提琴做了所有事情，除了它不保留它被“放下”的位置，而是回到原来的位置。

想法？

Answer 1

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

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

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

1. 相对的
2. 固定的
3. 绝对

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

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

这确保了元素根据窗口的位置停留在页面顶部，因此当您向上滚动时，它会留在原来的位置。