Javascript 基础帆布滚动问题 我从基金会开始，试图得到一个例子。我一直在挣扎，因为菜单的打开和关闭应该是这样的，但是如果页面内容很长，你向底部滚动，当你打开菜单时，焦点是你在页面上的位置。即，固定工具栏和菜单在打开时不固定

我已经在小提琴上做了一个例子，希望能得到一些帮助

HTML

Javascript

$(document).foundation();

---

<>这是非常流行的基础问题：

尽管官方的解决方案似乎不存在，但我发现（）似乎是解决您问题的好方法

HTML

---

我没有足够的声誉来评论……所以我再补充一下，作为对Akarienta的回答

使用上述解决方案，我在移动浏览器上遇到了滚动问题。 我添加了

-webkit overflow scrolling:touch

，滚动正常

article,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap
  height: 100%
  width: 100%
  -webkit-overflow-scrolling: touch
article
  overflow-y: auto

---

多亏了问题

这个答案中的CSS帮助我解决了Chrome中的问题。非常感谢。你能不能详细说明一下这里的诀窍是什么，以及它为什么起作用？

$(document).foundation();

<div class="off-canvas-wrap">
   <div class="inner-wrap">
      <div class="header">
         <nav class="tab-bar" data-offcanvas>
            <section class="left-small">
               <a class="left-off-canvas-toggle menu-icon">
                  <span></span>
               </a>
            </section>
            <section class="right tab-bar-section">
               <h1>Foundation 5 test</h1>
            </section>
         </nav>
      </div>
      <aside class="left-off-canvas-menu">
         <ul class="off-canvas-list">
            <li>
               <label>Foundation</label>
            </li>
            [...]
            <li><a href="#">The Psychohistorians</a>
            [...]
            </li>
         </ul>
      </aside>
      <article class="small-12 columns">
         <p>Content</p>
         <p>Content</p>
         <div data-magellan-expedition="fixed">
            <dl class="sub-nav panel">
               <dd data-magellan-arrival="build">
                  <a href="#build">Build with HTML</a>
               </dd>
               <dd data-magellan-arrival="js">
                  <a href="#js">Arrival 2</a>
               </dd>
            </dl>
         </div>
         [...]
         <p>Content</p>
         [...]
      </article>
      <a class="exit-off-canvas"></a>
      <footer class="small-12 columns">
         <div>...</div>
      </footer>
   </div>
</div>

article {
    overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap,
.row {
    height: 100%;
    width: 100%;
}
.header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

article,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap
  height: 100%
  width: 100%
  -webkit-overflow-scrolling: touch
article
  overflow-y: auto