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,至少没有jQuery.

PS:我发现了两个相关的问题:1.这一个关于相对于固定/绝对定位的问题2. 这个问题似乎尚未得到解决但相似

Answer 1

transitionCSS中的属性一步一步地工作; 起始值和结束值必须是相同的格式.不幸的是,position: fixed;和position: absolute;是两个完全不同的值,即使他们都property值.

你正在寻找的行为确实存在于CSS中,并且被称为粘性定位,尽管它的支持非常有限.这是一个工作演示(确保您使用支持的浏览器):

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来添加平滑的"过渡"动画.