Foundation 6 - липкое меню и контент вне холста

Я сталкиваюсь с проблемой, когда использую липкую панель навигации без холста.

Проблема: Как только я нажму на значок гамбургера, появится всплывающее окно вне холста, но панель навигации будет перемещена в верхнюю часть страницы, а не в верхнюю часть области просмотра. Он должен оставаться в том же положении, что и при нажатии на значок гамбургера.

Прецедент: 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 & {

  }
}