Элемент преобразования элемента между появлением «относительного» и «фиксированного» не является гладким

Question

У меня есть страница с баннером (.banner) и плавающим элементом (.float).

Когда пользователь выполняет прокрутку с видимым баннером, я хочу, чтобы появился .floatотносительно баннера (по центру по вертикали), но когда пользователь прокручивает мимо баннера, он прилипает к экрану.

На самом деле, положение с плавающей точкой всегда fixed, и я использую Javascript для измененияпреобразуйте значение, чтобы разместить его там, где я хочу, на прокрутке.

Это почти работает, как я хочу, но я хочу, чтобы элемент «скользил» между позициями, и я не могу заставить это поведение работать так, как я хочу.Без перехода CSS, он прыгает.С переходом CSS он скользит, но когда я прокручиваю назад вверх, он скользит слишком далеко над вертикальным центром баннера;Я хочу, чтобы он чувствовал, что он «прилипает» к баннеру после того, как вы прокрутите обратно к баннеру.

Любая помощь приветствуется.JSFiddle здесь: 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

Это результат, который вы ищете?

    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>