将 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 示例链接到上面的both 方法。有没有办法防止移动设备在切换到固定位置时隐藏内容？

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