Div與位置固定，直到某個高度毛刺

Question

我無法修復一個向下滾動頁面並停在特定高度的腳本。在它到達點之前，它需要再次處於絕對位置，它會消失一會兒，然後出現。

下面是the code一個例子：

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 

    if (y > 280 && y < 1600) { 
     $('#model').css("position","fixed"); 
     $('#icons').css("position","fixed"); 
     $('#icons').css("bottom",0); 
    } else if (y >= 1601) { 
     $('#model').css("position","absolute"); 
     $('#model').css("top",1600); 
     $('#icons').css("position","absolute"); 
     $('#icons').css("top",1600); 
    } else { 
     $('#model').removeAttr('style'); 
     $('#icons').removeAttr('style'); 
     $('#icons').removeAttr('style'); 
    } 
}); 

任何幫助表示讚賞！

Answer 1

的毛刺你指的是可以通過任一的兩個條件引起：

1. 對於第一個條件，必須280 & 1599（< 1600）之間的scrollTop的範圍內，並且進一步>= 1601 。這會在scrollTop位置1600本身上留下空白區域。
2. 當您從底部向頂部滾動時，#model div的頂部未被設置回原始狀態（0），並且它以某種方式漫遊到它的容器邊界（我想）。

因此，在你的代碼如下更改應該可以解決這個問題：

if (y > 280 && y < 1600) { 
    $('#model').css("position","fixed"); 
    $('#model').css('top', 0);   // add this rule 
    $('#icons').css("position","fixed"); 
    $('#icons').css("bottom",0); 
} else if (y >= 1600) {     // change the condition to include range greater than or equal to 1600 
    $('#model').css("position","absolute"); 
    $('#model').css("top",1600); 
    $('#icons').css("position","absolute"); 
    $('#icons').css("top",1600); 

JSFiddle Demo。