粘性頁眉向下滾動

Question

我有一個奇怪的問題。 我想讓我堅強。 在互聯網上，我發現一些實例也正在運行，到目前為止，我的網站上已經實現了這些實例。 現在是這樣，當我經過峰值時，設置了“固定”位置，然后內容就跳了起來。

這是我的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/

但是我想要一個滾動的滾動。

有什么建議么？

謝謝

Answer 1

實際上，由於對p標簽應用了邊距，因此會有一些跳躍。

因此，當您調用if( $(window).scrollTop() > objectheight為40像素時，實際上確實有10像素的間隙會導致跳轉。

您可以通過css減小p裕度，也可以將該裕度值分配給objectheight 。

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

Answer 2

這可能不適用於移動設備，因為“滾動”事件僅在移動設備上完全停止滾動后才觸發一次。 因此，這將有點“跳躍”。 您需要一個第三方庫來處理滾動事件，例如iscroll