如何使Foundation 5的画布导航菜单粘性？

本文介绍了如何使Foundation 5的画布导航菜单粘性？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用最新版本的Foundation添加画布外导航菜单，并向标签栏添加切换。虽然我有这个工作与标签栏粘，屏幕外菜单的内容滚动与页面。如何使菜单的内容是粘性的，在任何大小的屏幕或页面垂直滚动位置击中菜单切换将显示菜单内容不滚动？我的HTML到目前为止：

I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. 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:

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

推荐答案

使内容的高度为95vh， y =滚动。每当滚动右侧的内容时，画布外菜单不受影响，并保持在顶部。

Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.

CSS：

.mycontent {
  height:95vh;
  overflow-y:scroll;
  /* fix scrolling on webkit touch devices (iPhone etc) */
  -webkit-overflow-scrolling: touch;
}

HTML：

  <div class="row mycontent" >
      <div class="large-12 columns">
          <h1>Welcome to Foundation</h1>
      </div>
  </div>

这篇关于如何使Foundation 5的画布导航菜单粘性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！