絕對位置變成滾動位置

Question

在下面的代碼段中，您將看到我有兩個部分。 一綠一藍。 然后在綠色部分，有一個圓圈圖標。 本質上，我要尋找的是將圓形圖標放置在當前頁面加載時的位置，但是隨后隨着用戶滾動，圖標將更改為固定位置，直到藍色部分位於屏幕頂部。 然后，當用戶向后滾動時，圓圈圖標將執行相反的操作，並保持固定狀態，直到它返回其原始位置為止。

我怎樣才能做到這一點？

 #slantWrap { height: 80vh; width: 100%; position: relative; background: green; } #redIcon { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; margin: 0; } #redIcon img { height: 90px; width: auto; } #sec { width: 100%; height: 400px; background: blue; } 

 <div id="slantWrap"> <div id="redIcon"> <img src="http://www.iconhot.com/icon/png/devine/256/circle.png" alt="icon"> </div> </div> <section id="sec"></section> 

Answer 1

$(window).scroll(function (e) {
     if($(this).scrollTop() >= $('#sec').offset().top - 90){
      $('#redIcon').addClass('fixed');
     } else {
      $('#redIcon').removeClass('fixed');
  }
 });

因此，此功能會在用戶每次滾動時觸發。 什么if語句尋找的是，如果第二div （藍色背景）從窗口的頂部90像素，（注意，這- 90是相同的高度圖像）添加類的fixed如果該#sec div不是距屏幕頂部90px，然后刪除fixed的類。 最后，您需要將其添加到CSS中，以添加與類固定的位置。

#redIcon.fixed{
  position:fixed;
  top:0px;
}

工作CodePen： https ：//codepen.io/ben456789/pen/OZPEpG

希望這可以幫助！