置頂標題滾動misfunction

Question

我有以下我的頭代碼，如果它到達窗口的頂部是變粘：

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'static', 
       top: '0px' 
      }); 
     } 
    }); 
}); 

它的工作原理，但是當它到達頂部，變粘的內容滾動正常滾動+在頁眉上方的div的高度（所以它跳得太大，看起來並不平滑）

Answer 1

感謝CBroe的提示！ 這是一個可行的解決方案：

$(function() { 
    var stickyHeaderTop = $('#outer-header').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() >= stickyHeaderTop) { 
      $('#outer-header').css({ 
       position: 'fixed', 
       top: '-300px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } else { 
      $('#outer-header').css({ 
       position: 'absolute', 
       top: '0px' 
      }); 
      $('#main').css({ 
       position: 'relative', 
       top: '332px' 
      }); 
     } 
    }); 
});