如何让Foundation 5离开画布的导航菜单变粘？
[英]How to make Foundation 5 off-canvas navigation menu sticky?
问题描述
I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. 
我使用最新版本的Foundation来添加离开画布的导航菜单，并在标签栏中添加一个切换。 While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. 虽然我使用tab-bar是粘性的，但是非画布菜单的内容随页面滚动。 How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? 如何使菜单的内容变得粘稠，以便在任何大小的屏幕或页面上垂直滚动位置按菜单切换将显示菜单内容而不滚动？ My HTML so far is: 到目前为止我的HTML是：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="contain-to-grid sticky">
<nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large">
<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">Foundation</h1>
</section>
</nav>
</div>
<div class="inner-wrap">
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</aside>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<!-- Content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2015-03-15 14:14:20
Make the height of the content 95vh and the overflow-y=scroll. 使内容的高度为95vh，溢出-y =滚动。 Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top. 每当滚动右侧的内容时，非画布菜单不受影响并保持在顶部。
CSS: CSS：
.mycontent {
height:95vh;
overflow-y:scroll;
/* fix scrolling on webkit touch devices (iPhone etc) */
-webkit-overflow-scrolling: touch;
}
HTML: HTML：
<div class="row mycontent" >
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
解决方案2
0 2015-03-21 14:09:02
Try this in css (Works 100%) 在css中尝试这个（Works 100％）
.tab-bar {
position: fixed;
width: 100%;
z-index: 702;
}
解决方案3
0 2016-04-01 12:18:56
I had the same issue, couldn't get it to stick when open. 我有同样的问题，打开时无法坚持下去。 In the end I went with this: 最后我跟着这个：
CSS: CSS：
.tab-bar {
position: fixed;
z-index: 9999;
width: 100%;
}
Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s.
.inner-canvas-menu-wrapper
{
position: fixed;
top: 0;
overflow-y: hidden;
width: inherit;
padding-top: 2.8125rem; (standard height of the "tab-bar")
}
JS JS
Changed foundation.offcanvas.js -> settings -> open_method to "overlap" 将foundation.offcanvas.js - > settings - > open_method更改为“overlap”
Now it overlaps, but it at least it is fixed/sticky. 现在它重叠，但它至少是固定/粘性的。 You may want to change close_on_click to "true" as well in this setup. 您可能希望在此设置中将close_on_click更改为“true”。
If you are using Foundation 6 it will be fixed by default: https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference 如果您使用的是Foundation 6，它将默认修复： https ： //foundation.zurb.com/sites/docs/off-canvas.html#sass-reference
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.