如何使Foundation 5的畫布外導航菜單變得粘稠？

我正在使用最新版本的Foundation來添加一個畫布外導航菜單並向切換欄添加切換。雖然我在粘貼標籤欄的過程中使用了該功能，但是非畫布菜單的內容會隨頁面一起滾動。我怎樣才能使菜單內容粘稠，以便在任何尺寸的屏幕或頁面上垂直滾動位置按下菜單切換將顯示菜單內容而不滾動？我的HTML到目前爲：如何使Foundation 5的畫布外導航菜單變得粘稠？

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

來源

2014-04-16 Matt W

嘿檢查出的第一篇文章就在這裏：http://foundation.zurb.com/forum/posts/547-off-canvas -with-fixed-top-bar？page = 2如果你正在尋找與我相同的效果，它似乎正在正常工作。 –

請記住標記您接受的答案。 – tehlivi

使內容95vh和溢出y =滾動的高度。每當右側的內容滾動時，畫布外菜單不受影響並保留在頂部。

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>

來源

2015-03-15 14:14:20

下面是瀏覽器支持vh＆vw的好鏈接http://caniuse.com/#feat=viewport-units –

爲了便於說明，類「mycontent」只是繞過頁面內容，不包括標籤欄或畫布菜單。這可以在不添加「粘性」或「固定」類的情況下起作用。 – tehlivi

這也打破了iPhone上的平滑滾動。滾動變得生澀。 Android很好。 – tehlivi

在CSS試試這個（作品100％）

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

來源

2015-03-21 14:09:02

這個問題使得畫布外的部分變得粘稠。這隻會使標籤欄變得粘稠。 – tehlivi

我有同樣的問題，不能得到打開時粘住。最後我去了這一點：

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") 
}

改變foundation.offcanvas.js - >設置 - > open_method爲「重疊」

現在重疊，但它至少是固定的/粘性的。您也可以在此設置中將close_on_click更改爲「true」。

如果使用基金會6默認情況下將被固定： https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference

來源

2016-04-01 12:18:56 XaYdEk

如何使Foundation 5的畫布外導航菜單變得粘稠？

回答

相關問題