JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="header">
  <div id="secondary">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    <div id="profile" class="load">profile</div>
  </div>
  <div id="primary">
    <div id="logo">logo</div>
    <div id="promo">promo</div>
    <div id="fake_profile">profile</div>
  </div>
</div>
<main></main>

SCSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  
}

#secondary {
  align-items: center;
  background-color: gainsboro;
  display: flex;
  height: 40px;
  position: fixed;
  width: 100%;
  z-index: 10;
  
  a {
    padding: 0 10px;
  }
  
  #profile {
    border: 1px solid gray;
    height: 38px;
    margin-left: auto;
    position: absolute;
    top: 0;
    transition: all 0.25s;
    width: 225px;
    
    &.parked {
      height: 60px;
    }
    &.load {
      transition: none;
    }
  }
}

#primary {
  align-items: center;
  display: flex;
  padding: 10px;
  position: relative;
  top: 40px;
  
  #logo {
    border: 1px solid gainsboro;
    height: 100px;
    width: 225px;
  }
  #promo {
    flex-grow: 1;
  }
  #fake_profile {
    border: 1px solid gainsboro;
    height: 60px;
    visibility: hidden;
    width: 225px;
  }
}

main {
  height: 1000px;
}

JavaScript

console.clear();

var profile = document.querySelector('#profile');
var fakeProfile = document.querySelector('#fake_profile');

function headerScroll (dist) {
	if (dist <= 0) {
  	profile.classList.add('parked');
    profile.setAttribute('style', 'left: ' + fakeProfile.getBoundingClientRect().left + 'px; top: ' + fakeProfile.getBoundingClientRect().top + 'px;');
  } else {
    profile.classList.remove('parked');
    profile.removeAttribute('style');
    profile.setAttribute('style', 'left: ' + fakeProfile.getBoundingClientRect().left + 'px');
  }
}
headerScroll(0);

document.addEventListener('scroll', function (e) {
	requestAnimationFrame(function () { headerScroll(e.pageY) });
});

window.setTimeout(function () {
	profile.classList.remove('load');
}, 100);