在某個點停止滾動

Question

我試圖複製類似於this的內容。

當你向下滾動，你（position: fixed）在div滾動，直到它到達某一點，在那裏不動爲止（position: absolute），和你繼續向下滾動，它保留了頁（250px）上的位置，直到你捲起來再次拾起它。

What I have so far。

現在我的小提琴會做所有事情，除非它不保留它被「脫落」的位置，而是回到原來的位置。

想法？

Answer 1

您需要計算窗口的scrollTop值，然後將其應用爲top和set position的值爲absolute。

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

這確保了元件停留在基於窗口的位置在頁面的頂部，所以當你向後滾動它的位置。