桌面导航栏粘顶部粘底

Question

我用Skeleton我的CSS框架

目前我有坚持顶在PC桌面视图导航栏（即，在它的页面滚动移动导航栏）。下面的代码：

<div style="height:50px"> 
<div id="fixed-nav-bar"> 
    <div class="container" id="nav"> 

    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 

    </div> 
</div> 
</div> 



#fixed-nav-bar { 
     position:fixed; 
     top: 0; 
     left: 0; 
     z-index: 9999; 
     width: 100%; 
     height: 50px; 
     background-color:linen; 
    } 

#nav ul { 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    list-style-type: none; 
    text-align: center; 
    } 

#nav ul li { 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    } 

我的问题：我怎样才能让这个在移动设备查看它的时候（即手机），导航栏移动到下（是易于使用的单手模式）并保持粘性？

我猜我需要使用媒体查询。我如何在这里使用它们？

Answer 1

这是我的解决方案：与bottom:0;你得到你的#fixed-nav-bar到页面的底部。只需将960像素替换为您不想使用#fixed-nav-bar的设备的宽度即可。

@media screen and (max-width: 960px) { 
    #fixed-nav-bar { 
     top: inherit; 
     bottom: 0; 
    } 
}