javascript - 将导航栏移动到媒体查询的右侧

Question

我试图在浏览器窗口达到特定大小时将导航栏移动到右侧的固定位置，并在小于该大小时将其置于顶部。使用下面的代码(如 jsfiddle 中所示)，当我调整 html 大小时，导航栏在左侧(而不是右侧)对齐。

问题，如何将导航栏移动到媒体查询屏幕的右侧。根据我在 SO 上发现的几个问题，使用 position: fixed; 应该就足够了。顶部:50%； right:0; 但它没有按预期工作。

(请注意，如果你想在链接到 jsfiddle 上进行测试，你可以拉伸(stretch) html 部分的边界以触发媒体查询)。

片段和jsfiddle :

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ddd;
}

.navbar ul,
.navbar li {
  display: inline-block;
}

@media (min-width: 767px) {
  .navbar {
    position: fixed;
    top: 50%;
    right: 0;
    background-color: #ddd;
    width: 0%;
  }
  .navbar ul,
  .navbar li {
    display: block;
  }
}

<nav class="navbar">
  <ul class="navbar-top-right">
    <li><button onclick="jump('header')">home</button></li>
    <li><button onclick="jump('special')">Special</button></li>
    <li><button onclick="jump('menu')">Menu</button></li>
    <li><button onclick="jump('map')">Map</button></li>
    <li><button onclick="jump('about')">About</button></li>
  </ul>
</nav>

Answer 1

是的，您设置正确，这是正确的。但是当你 inpsect 时，你可以看到该元素还设置了 left: 0。

在 media query 中使用 left: initial 重置 left 并设置一些 width 到你的 navbar - 请参见下面的演示:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ddd;
}

.navbar ul,
.navbar li {
  display: inline-block;
}

@media (min-width: 767px) {
  .navbar {
    position: fixed;
    top: 50%;
    right: 0;
    left: initial;
    width: 125px;
    background-color: #ddd;
    /*width: 0%;*/
  }
  .navbar ul,
  .navbar li {
    display: block;
  }
}

<nav class="navbar">

  <ul class="navbar-top-right">
    <li><button onclick="jump('header')">home</button></li>
    <li><button onclick="jump('special')">Special</button></li>
    <li><button onclick="jump('menu')">Menu</button></li>
    <li><button onclick="jump('map')">Map</button></li>
    <li><button onclick="jump('about')">About</button></li>
  </ul>

</nav>