基础6 - 粘性菜单和画布内容

Question

我在画布上使用粘性导航栏时遇到问题。

问题：一旦我点击汉堡图标，就会弹出画布，但导航栏将移动到页面顶部而不是视口顶部。它应该保持与点击汉堡图标时相同的位置。

测试用例：https://codepen.io/anon/pen/YaGaPM

HTML ：

<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="push">
    <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
        <li>
            <a href="#">Item 1</a>
            <ul class="vertical menu">
                <li>
                    <a href="#">Item 1A</a>
                    <ul class="vertical menu">
                        <li><a href="#">Item 1A</a></li>
                        <li><a href="#">Item 1B</a></li>
                        <li><a href="#">Item 1C</a></li>
                        <li><a href="#">Item 1D</a></li>
                        <li><a href="#">Item 1E</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 1B</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item 2</a>
            <ul class="vertical menu">
                <li><a href="#">Item 2A</a></li>
                <li><a href="#">Item 2B</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
            <ul class="vertical menu">
                <li><a href="#">Item 3A</a></li>
                <li><a href="#">Item 3B</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="off-canvas-content" data-off-canvas-content>

    <div class="scrollhide-nav">
        <div class="title-bar">
            <button class="menu-icon" type="button" data-toggle="offCanvasLeftOverlap"></button>
            <div class="title-bar-title">Menu</div>
        </div>

    </div>
</div>

JS ：

$(document).foundation();
var nav_prev = 0;
$(window).on('scroll', function(){
    var scrollTop = $(window).scrollTop();
    $('.scrollhide-nav').toggleClass('hidden', scrollTop > nav_prev);
    nav_prev = scrollTop;
});

SCSS ：

.scrollhide-nav {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.8, 0, 0.4, 1);

  &.hidden {
    transform: translateY(-100%);
  }

  .is-open-left & {

  }
}