Element transform transition between appearing 'relative' and 'fixed' not smooth

Question

I have a page with a banner ( .banner ) and a floating element ( .float ).

When the user is scrolling with the banner in view, I want the .float to appear relative to the banner (centred vertically), but when the user scrolls past the banner, it sticks to the screen.

In reality, the position of float is always fixed and I am using Javascript to change the transform value to position it where I want on scroll.

It's almost working as I want, but I want the element to 'slide' between positions and I can't get this behaviour to work as I want. Without a CSS transition, it jumps. With a CSS transition, it slides, but when I scroll back up it slides too far above the vertical center of the banner; I want it to feel like it 'sticks' to the banner once you have scrolled back up to the banner.

Any help appreciated. JSFiddle here: http://jsfiddle.net/L452xf7h/12/

HTML:

<div class="container">
  <div class="banner"></div>
  <div class="float">Floating Element</div>
</div>

CSS:

body, html {
  margin: 0;
}

.container {
  background: orange;
  height: 2000px;
}

.banner {
  width: 100%;
  height: 400px;
  background: white;
}

.float {
  display: none;
  width: 50px;
  height: 50px;
  background: red;
  position: fixed;
  top: 100px;
  right: 100px;
  /* this transition makes float travel high in banner when scrolling up */
  /* transition: transform .3s linear; */
}

JS:

var float = document.querySelector('.float');

if (float) {
    // init position
  onScroll();
  // check on scroll
  window.addEventListener('scroll', onScroll);
}

function onScroll() {
var banner_height = 400;
var float_topCss = 100;
var float_height = 50;
  if (window.scrollY < banner_height) {
    position = 0;
    // center vertically in banner
    position += banner_height / 2;
    position -= float_height / 2;
    // account for current scroll
    position -= window.scrollY;
    // minus difference of top css value
    position -= float_topCss;
    float.style.transform = "translate3d(0,"+position+"px,0)";
  }
  else {
    float.style.transform = "translate3d(0,0,0)";
  }
  float.style.display = 'block';
}

Answer 1

Is this the result you are looking for?

  var float = document.querySelector('.float'); if (float) { // init position onScroll(); // check on scroll window.addEventListener('scroll', onScroll); } function onScroll() { var banner_height = 400; if (window.scrollY < banner_height) { float.classList.remove('sticky'); } else { float.classList.add('sticky'); } } 

  body, html { margin: 0; } .container { background: orange; height: 2000px; position: relative; } .banner { width: 100%; height: 400px; background: white; } .float { display: inline-block; width: 50px; height: 50px; background: red; position: absolute; top: 100px; right: 100px; float: right; transition: transform .3s linear; } .float.sticky { top: -50px; transform: translateY(150px); position: sticky; } 

 <div class="container"> <div class="banner"></div> <div class="float">Floating Element</div> </div>