Question

在.menu-trigger上添加top:12px, left: 0课程时，如何将top: 12px, left: 120px从位置.active转换到最终位置header？请注意，添加.active课程后，.menu-trigger变为position: fixed并移出标题。这是我要解决的问题的要求。

var header = document.querySelector("header");

document.getElementById('test').onclick = function() {
    header.classList.toggle('active');
}

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  height: 60px;
  background: black;
  margin-top: 120px;
}

.menu-trigger {
  display: inline-block;
  border: none;
  color: white;
  background: cyan;
  height: 60px;
  width: 60px;
  font-size: 24px;
}

header.active .menu-trigger{
  position: fixed;
  top: 12px;
  left: 120px;
  right: auto;
  bottom: auto;
}

#test {
  margin-top: 24px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <button class="menu-trigger">
    <span class="fa fa-bars"></span>
  </button>
</header>
<button id="test">Test</button>

Answer 1

你可以让菜单触发器始终固定，这样你就可以立即获得正确的位置

  position: fixed;
  top: 120px;

然后当添加活动类时，你所要做的就是改变位置，不要担心顶部或设置为静态，因为它已经存在。确保您在活动状态中设置top: 120px或者只是将其全部删除，因为它已经在菜单的基本样式上设置 - 触发器就是笔http://codepen.io/finalfreq/pen/RGgEkq

CSS转换元素位置

1 个答案: