How to make Foundation 5 off-canvas navigation menu sticky?

StackOverflow https://stackoverflow.com/questions/23107926

Domanda

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>
È stato utile?

Soluzione

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>

Altri suggerimenti

Try this in css (Works 100%)

.tab-bar {
  position: fixed;
  width: 100%;
  z-index: 702;
}

I had the same issue, couldn't get it to stick when open. In the end I went with this:

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

Changed foundation.offcanvas.js -> settings -> open_method to "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.

If you are using Foundation 6 it will be fixed by default: https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top