粘滞标题在向下滚动时跳转

Sticky Header jumps on scroll down

本文关键字：滚动 标题      更新时间：2023-09-26

我有一个奇怪的问题。我想给我一个黏糊糊的脑袋。在互联网上，我发现一些实例也在运行，现在我已经在我的网站上实现了。现在是这样的，当我通过峰值时，在那里设置了"固定"位置，然后内容就会跳跃。

这是我的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），因为我也想在移动设备上使用它，用户可能会展开菜单，然后这个值比默认值大。

（可以在移动设备上使用吗？）

这是一把小提琴：http://jsfiddle.net/vjb1ag27/

但我想要一个烟雾滚动。

有什么建议吗？

感谢

实际上，由于应用于p标记的边距，出现了一点跳跃。

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

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

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

这可能在移动设备上不起作用，因为"滚动"事件只会在移动设备完全停止滚动后触发一次。所以这会有点"紧张"。您需要的是一个第三方库来处理滚动事件，如iscroll

相关文章：