CSS3 从固定到绝对的过渡

Question

固定在滚动上

我创建了一个绝对定位在文档中的徽标元素，当我滚动它时，它会以固定位置固定在窗口顶部（此处的示例：https://jsfiddle.net/swzbe9cv/2）

JavaScript

  window.addEventListener('scroll', fixLogo);
  function fixLogo(){
    if(window.scrollY >= trigger){
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
    } else{
      if(logo.classList.contains('fixed') && !nav.classList.contains('show')){
        logo.classList.remove('fixed');
      }
    }
  }

CSS

.logo {
  position: absolute;
  top: calc(100% + 15px);
  height: 40px;
  width: 100px;
}

.fixed {
  position: fixed;
  top: 15px;
}

出现菜单

然后我决定在左侧添加一个菜单，通过单击徽标元素来显示/隐藏。这个菜单有一个固定的位置，当它显示时，标志就在它的顶部。 （此处示例：https://jsfiddle.net/6cskthuz/2/） JavaScript

  logo.addEventListener('click',showMenu);
  function showMenu(){
    if(nav.classList.contains('show')){
      if(window.scrollY < pageheight && logo.classList.contains('fixed')){
        logo.classList.remove('fixed');
      }
      nav.classList.remove('show');
    } else {
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
      nav.classList.add('show');
    }
  }

CSS

nav {
  z-index:1;
  position: fixed;
  top: 0px;
  left: -8vw;
  width: 8vw;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  transition: 1s;
  padding-top: 8vw;
  text-align: center;
  font-size: 2rem;
}
.show {
  left: 0px;
}

当菜单出现且徽标位于绝对位置时，如何平滑翻译菜单顶部的徽标元素？

我想这样做 CSS only 充其量，没有 jQuery 至少。

PS：我发现了两个相关的问题： 1.this one关于相对固定/绝对定位 2. 和this one 似乎未解决但相似

Answer 1

CSS 中的transition 属性是逐步工作的；开始值和结束值必须是相同的格式。不幸的是，position: fixed; 和 position: absolute; 是两个完全不同的值，尽管它们都是 property 值。

您正在寻找的行为确实存在于 CSS 中，称为粘性定位（有 issues in tables in Chromium browsers）。这是一个工作演示（确保您使用受支持的浏览器）：

html, body {
    margin: 0;
}

body * {
    margin: 20px;
    padding: 20px;
}

.header {
    margin: 0;
    padding: 20px;
    background: #000;
}

.header span {
    display: block;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.placeholder {
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
    height: 300px;
}

.slider {
    background: #006264;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    position: sticky;
    -webkit-position: sticky;
    top: 0px;
}

<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>

因此，如果您想要广泛支持该行为，则需要使用 JavaScript，并且还需要使用 JavaScript 添加平滑的“过渡”动画。