桌面导航栏粘性顶部到移动导航栏粘性底部

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;
  }

我的问题：如何才能在移动设备（即 phone）中查看它时，导航栏移动到底部（以便在单手模式下轻松使用）并保持粘性？

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

Answer 1

这是我的解决方案：使用 bottom:0; 可以将 #fixed-nav-bar 放到页面底部。只需将 960px 替换为 select 您不会 #fixed-nav-bar 转到底部的设备宽度。

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

桌面导航栏粘性顶部到移动导航栏粘性底部

desktop nav bar sticky top to mobile nav bar sticky bottom

css

media-queries

responsive-design