javascript - 将 div 切换到固定的 CSS 定位，而不会导致内容在移动设备上消失

Question

我正在尝试实现“先滚动后固定”的 HTML/CSS 布局。这个想法是，用户可以稍微滚动页面 - 直到站点标题不可见 - 此时页面上的主要产品图像将固定在页面顶部，其余页面内容将继续滚动。这是我要实现的目标的模型:

如您所见，起初，站点标题是可见的，但用户可以向下滚动。当产品图片(黄色)到达页面顶部时，它会固定在窗口顶部。

我现在这样做的方法是监听文档中的滚动事件(使用 jQuery)，然后在用户滚动超过页眉高度时更改产品图像的 CSS 位置属性。我已经尝试过 both CSS position fixed 和 absolute，但每个都有它们的问题:

1. 如果我切换到固定定位，则在移动设备(iOS 和 Android)上滚动非常流畅，产品图像完美锁定在窗口顶部。但是，如果您将手指放在屏幕上，产品图片的内容就会消失，并且 div 从相对位置切换到固定位置。它们会在您释放后立即重绘，但在您滚动时它看起来很破损。这只发生在移动设备或模拟器上；不在桌面浏览器中。 <强> JSBin Example 。
2. 如果我切换到绝对定位(并提供顶部偏移)，我不会遇到手机停止绘制产品图像的问题，但是，滚动确实参差不齐。滚动时产品图片会跳动。 <强> JSBin Example .

对于#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'
    });