打开和关闭面板时，如何防止浏览器窗口跳回到页面顶部？

我一直在一个网站上工作，该网站具有永久标题，并且导航面板可以滑出屏幕顶部。当前，它的工作原理是将标题和导航面板包装在固定的div中，并赋予该div负的上边距，该宽度等于导航的高度。

的HTML

<div class="sticky">
  <div class="above-header">
    This is the navigation panel.
  </div>

  <div class="header">
    This is a logo
    <a href="#" class="toggle">Toggle</a>
  </div>
</div>

CSS

.sticky {
  height:300px;
  margin:-250px 0 0;
  position:fixed;
  z-index:1000;
}

.above-header {
  height:250px;
}

.header {
  height:50px;
}

.open {
  margin:0
}

然后，我使用一个微型js / jquery脚本将该边距更改为0，从而使导航可见。

$('a.toggle').click(function() {
    if ($('.sticky').hasClass('open')){  
        $('.sticky').removeClass('open');
      }
      else{
        $('.sticky').addClass('open');
      }
});

除了一个问题，我的工作正常：如果打开或关闭面板，则无论滚动到何处，该视图都将跳至页面顶部。

我在Codepen上重新创建了该问题的简化版本，以演示我在说什么。

我无法想象为什么这样做，而我的Google Fu还没有找到任何答案。任何想法我可以做些什么来解决此问题？也许有一种我不知道的更好的技术？