javascript - 粘性标题在向下滚动时跳转

Question

我有一个奇怪的问题。我想为自己打造一个粘性脑袋。在 Internet 上我发现一些实例也在运行，现在我已经在我的网站上实现了。现在是这样的，当我通过 peak 时，设置了“固定”位置然后内容跳转。

这是我的javascript:

$(window).scroll(function()
{
  // This is the value from which the content (gridViewTop) should be sticked
  var objectheight = $('header').height();
  if( $(window).scrollTop() > objectheight )
  {
    $('#gridViewTop').css({position: 'fixed'});
    $('#gridViewTopPH').css({display: 'block'});
  } 
  else 
  {
    $('#gridViewTop').css({position: 'static', top: '0'});
    $('#gridViewTopPH').css({display: 'none'});
  }
});

一件事:我采用值 (objectheight)，因为我也想在移动设备上使用它，并且用户可能会展开菜单，然后该值会比默认值大。

(可以在移动设备上使用吗？)

这里有一个 fiddle : http://jsfiddle.net/vjb1ag27/

但我想要移动滚动。

有什么建议吗？

谢谢

Answer 1

实际上，由于应用到 p 标签的边距，有一点跳跃。

因此，当您调用 if( $(window).scrollTop() > 时，objectheight 是 40 像素，但实际上有一个 10px 的间隙导致了跳跃。

您可以通过 css 减少 p 边距或将该边距值分配给 objectheight。

http://jsfiddle.net/carlodurso/vjb1ag27/1/