fixed to absolute

transition top

HTML

<div class="absolute">
  Don't click me
</div>

CSS

body {
  height: 400vh;
}

.absolute {
  position: absolute;
  top: calc(20% + 15px);
  height: 40px;
  width: 100px;
  color: white;
  background-color: blue;
}

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

JavaScript

var div = document.getElementsByTagName('div')[0];

window.addEventListener('scroll', fixDiv);

function fixDiv() {
  if (window.scrollY >= window.innerHeight * 0.2) {
    if (!div.classList.contains('fixed')) {
      div.classList.add('fixed');
    }
  } else {
    if (div.classList.contains('fixed')) {
      div.classList.remove('fixed');
    }
  }
}