Question

我从基金会开始，并试图让画布示例工作。我一直在苦苦挣扎，因为菜单会按照应有的方式打开和关闭，但是如果页面内容很长并且您向下滚动，则当您打开菜单时，焦点就是您在页面上的位置。 IE，固定工具栏和菜单在打开时无法修复。

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

HTML

<div class="off-canvas-wrap" data-offcanvas="">
  <div class="inner-wrap">
<div class="fixed">
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
  </section>

  <section class="middle tab-bar-section">
    <h1 class="title">Forest School - PARS Insight</h1>
  </section>
</nav>
  </div>

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>General</label></li>
    <li><a href="#">Snapshot</a></li>
    <li><a href="#">Timetable</a></li>
    <li><a href="#">Homework</a></li>
  </ul>
</aside>
 Long Body Content Here

CSS

.off-canvas-wrap, .inner-wrap {
    min-height: 100%;
}

.off-canvas-wrap{  
    height: 100%;
    overflow-y: auto;
}

的Javascript

$(document).foundation();

Answer 1

这是非常受欢迎的基金会问题：

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas
http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar
https://github.com/zurb/foundation/issues/3863
https://github.com/zurb/foundation/issues/3710

尽管官方解决方案似乎尚不存在，但我发现this one（reference）看起来很好解决了你的问题。

HTML

<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>

CSS

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;
}

Answer 2

我没有足够的声誉来发表评论......所以加上作为对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

感谢this问题

基础 - 关闭画布滚动问题

2 个答案: