滚动1整页后，我有一个导航栏固定在顶部。中途滚动后，它会跳过页面的其余部分

Question

完整代码：http://liveweave.com/XGPWVt

我＆＃34;检查＆＃34;它与chrome，当#header_nav从相对到固定时发生。我尝试将第三行更改为if ($(window).scrollTop() > elementPosition.bottom) {，但导航栏并未固定在顶部。

var elementPosition = $('#header_nav').offset();
$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top) {
    $('#header_nav').css('position', 'fixed').css('top', '0');
  } else {
    $('#header_nav').css('position','relative');
  }
});

仅当我将预览窗口设为FULLSCREEN时才会发生这种情况。

当我将标题高度设置为px值时，也不会发生这种情况。但我需要它们作为缩放的百分比。