Foundation Off-Canvas 粘性菜单栏粘在底部

【问题标题】：Foundation Off-Canvas sticky menu bar to stick to bottomFoundation Off-Canvas 粘性菜单栏粘在底部
【发布时间】：2016-08-31 01:54:54
【问题描述】：

我正在尝试使用foundation 6 创建一个off-canvas 菜单，就像在official site 中所做的那样。

说到mobile菜单栏，我想让它粘在屏幕的底部。

.title-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
}

但是当我点击移动菜单时，菜单栏就像是absolute而不是fixed一样跳开。

有人遇到过这个问题并解决了吗？

【问题讨论】：

【解决方案1】：

需要进行一些更改。

<div class="content"> 应在<div class="off-canvas-content"> 中提及。 Off-canvas 旨在处理在其 off-canvas-content 类中编写的内容。
<div class="off-canvas-content"> 应该被推到使用完整的垂直高度。您可以提及height:100vh;，但请注意browser compatibility.
每当切换菜单图标时，<div class="off-canvas position-left"> 都会添加另一个类 is-open。和第 2 点一样，这也应该被推到使用整个垂直高度。

这里有一个working example 供您参考。

注意： 如果您觉得过渡有点奇怪，请安装 motion-ui 并应用一些过渡。

【讨论】：