將div切換到固定的CSS位置而不會導致內容在移動設備上消失

Question

我正在嘗試實現“滾動固定”的HTML / CSS布局。 這樣的想法是，用戶可以稍微滾動頁面-直到網站標題不可見-屆時頁面上的主要產品圖片將固定在頁面頂部，其余頁面內容將固定在頁面頂部。繼續滾動。 這是我要實現的模型：

如您所見，起初，站點標題是可見的，但是用戶可以向下滾動。 當產品圖片（黃色）到達頁面頂部時，它將固定在窗口頂部。

我現在這樣做的方法是（使用jQuery）偵聽文檔中的scroll事件，然后在用戶滾動超過標題的高度時更改產品圖像的CSS position屬性。 我已經嘗試了 CSS位置fixed和absolute ，但是每個都有其問題：

1. 如果我切換到固定位置，則在移動設備（iOS和Android上）上的滾動非常平滑，並且產品圖像完美地鎖定在窗口頂部。 但是，如果您將手指放在屏幕上並且div從相對於固定位置的位置切換， 產品圖像的內容就會消失 。 它們在您釋放時會重新繪制，但在滾動時看起來會損壞。 這僅在移動設備或仿真器上發生； 不在桌面瀏覽器中。 JSBin示例 。
2. 如果我切換到絕對定位（並提供最大偏移量），則手機不會停止繪制產品圖像，但是滾動確實參差不齊 。 產品圖像隨着滾動而跳轉。 JSBin示例 。

對於＃1，我這樣做：

  var docScrollTop = $(window).scrollTop();
  if (docScrollTop >= $('.dev-header-fixed').height()) {
    $fixableTop.css({
      'position': 'fixed',
      'top': 0,
      'z-index': 99,
      'display': 'block'
    });
  }

...對於＃2，我這樣做：

  var docScrollTop = $(window).scrollTop();
  if (docScrollTop >= $('.dev-header-fixed').height()) {
    $fixableTop.css({
      'position': 'absolute',
      'top': docScrollTop,
      'z-index': 99,
      'display': 'block'
    });
  }

我已經提供了上述兩種方法的完整且有效的JSBin示例鏈接。 有什么方法可以防止移動設備在切換到固定位置時隱藏內容？

Answer 1

在IE中也很煩人。 如何使用這個：

if (docScrollTop >= $('.dev-header-fixed').height()) {
    console.log('Fixed header state');
    $fixableTop.css({
      'position': 'fixed',
      'top': 0,
      'z-index': 99,
      'display': 'block'
    });