CSS3 Transition from Fixed to Absolute

Question

Fixed on scroll

I created a logo element that is absolutely placed in the document, and when I look at it, it is inserted at the top of the window with a fixed position (example here: 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;
}

When the menu appears

Then I decided to add a menu on the left, which is shown / hidden by clicking on the logo element. This menu has got a fixed position and logo to be on top when it is displayed. (example here: 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

transition CSS ; . , 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>

Hide result

, JavaScript, , JavaScript .