需要導航欄才能粘到窗口頂部Foundation 6

Question

我在導航欄停留在窗口頂部時遇到問題。我試過使用「粘性數據」，但沒有。無論我做什麼，它都會隨着頁面一起滾動。我也試圖將該類添加到中小型導航。有什麼建議麼？

HTML：

<!-- Small Navigation --> 
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium"> 
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a> 
    <button class="menu-icon" type="button" data-toggle></button> 
    <div class="title-bar-title">Menu</div> 
</div> 
<!-- Medium-Up Navigation --> 
<nav class="top-bar" id="nav-menu"> 
    <div class="logo-wrapper hide-for-small-only"> 
     <div class="logo"> 
      <img src="/assets/img/fingerLogoSM.2.gif"> 
     </div> 
    </div> 
    <!-- Left Nav Section --> 
    <div class="top-bar-left"> 
     <ul class="vertical medium-horizontal menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 

    <!-- Right Nav Section --> 
    <div class="top-bar-right"> 
     <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu> 
      <li class="has-submenu"> 
       <a href="#">Technologies</a> 
       <ul class="submenu menu vertical medium-horizontal" data-submenu> 
        <li><a href="#">Foundation</a></li> 
        <li><a href="#">HTML5</a></li> 
        <li><a href="#">CSS3</a></li> 
        <li><a href="#">JavaScript</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Portfolio</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

<!--End Main Navigation--> 

的CSS：

/* Small Navigation */ 

.logo-small { 
    float: right; 
    padding: 4px; 
} 

.title-bar { 
    padding: 0 .5rem; 
    background-color: #3D3242; 
} 

.menu-icon, 
.title-bar-title { 
    position: relative; 
    top: 10px; 
    padding: 4px; 
} 

/* Medium-Up Navigation */ 
@media only screen and (min-width: 40rem) { 

    .sticky { 
    width: 100%; 
} 

    .logo-wrapper { 
    position: relative; 
    } 

    .logo-wrapper .logo { 
    width: 92px; 
    height: 92px; 
    position: absolute; 
    left: 50%; 
    right: 50%; 
    top: -6px; 
    margin-left: -46px; 
    } 

    // Right part 
    .top-bar-right { 
    width: 50%; 
    padding-left: 60px; 
    } 

    .top-bar-right ul { 
    float: left; 
    } 

    // Left part 
    .top-bar-left { 
    width: 50%; 
    padding-right: 60px; 
    } 

    .top-bar-left ul { 
    float: right; 
    } 
} 

Answer 1

我在Zurb基金會論壇上受到了好人們的幫助。這裏是實施粘性TopBar的正確方法：

<div data-sticky-container> 
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0"> 
    <div class="top-bar"> 
     <div class="top-bar-left"> 
     <ul class="dropdown menu" data-dropdown-menu> 
      <li class="menu-text">Site Title</li> 
      <li class="has-submenu"> 
      <a href="#">One</a> 
      <ul class="submenu menu vertical" data-submenu> 
       <li><a href="#">One</a></li> 
       <li><a href="#">Two</a></li> 
       <li><a href="#">Three</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
     </ul> 
     </div> 
     <div class="top-bar-right"> 
     <ul class="menu"> 
      <li><input type="search" placeholder="Search"></li> 
      <li><button type="button" class="button">Search</button></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

再次感謝Val！

Answer 2

這裏有一個工作液你問：

： https://jsfiddle.net/368z4fun/

使用position:fixed;像這樣迎刃而解3210

還增加了一些CSS來修復fixed更改的樣式。謹防使用position:fixed;舊手機瀏覽器兼容性，您可能需要修復如this。

您還可以使用像StyleBot這樣的瀏覽器插件在您的實時網站上進行檢查。看看這個：

祝你好運！