jQuery导航无法识别同一页面上的链接

Question

我正在使用固定的导航栏，该导航栏会隐藏，直到用户向下滚动一定距离，此时导航会显示在页面顶部并保持固定：

HTML：

<nav id="fixedbar">
  <ul id="fixednav">
  <li><a href = '#top'>Top</a></li>
  <li><a href = '#bottom'>Bottom</a></li>
  <li><a href = '#contact'>Contact</a></li>
  </ul>
</nav>

脚本：

<script type="text/javascript">
$(document).ready(function(){
  $('#navigation a, #fixedbar a').on('click', function(e) {
  e.preventDefault();
});

$(window).on('scroll',function() {
  var scrolltop = $(this).scrollTop();
  if(scrolltop >= 700) {
    $('#fixedbar').fadeIn(250);
  }

else if(scrolltop <= 700) {
  $('#fixedbar').fadeOut(250);
}
});
});
</script>

CSS：

#fixedbar {
display: none;
position: fixed;
top: 0;
}

问题是导航栏中的链接（顶部，底部，联系人）在单击时不会跳转到同一页面上的相关ID。如果我将它们从固定导航中取出并放在其他地方，它们会正确跳转。

有人可以指出固定导航中链接的问题是什么，以及是否有解决方案？

由于