Плавное изменение position для кнопки

Question

https://codepen.io/Raneto4ka/full/bGEdzZj смотреть так, чтобы была вертикальная полоса прокрутки.

Суть в чем: есть блок с длинным текстом. Пока пользователь не долистал до конца страницы кнопка болтается поверх текста. Как только достиг конца документа, эта кнопка встает под текстом, меняя своё положение с фиксированного на статичное. Всё бы хорошо, но только процесс перехода происходит резко, скачком. Можно ли реализовать эту идею плавно и красиво? код здесь: https://codepen.io/Raneto4ka/pen/bGEdzZj

var timeout = false;

window.onscroll = function() {
  if (timeout !== false) {
    clearTimeout(timeout);
  }

  timeout = setTimeout(function() {
  const button = document.querySelector('.button');
  let clientHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
  let documentHeight = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
  let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  
  if((documentHeight - clientHeight) <= scrollTop) {
    button.classList.add('endScroll');
  }
  else {
    button.classList.remove('endScroll');
  }
  }, 250);
};

.menu {
  min-height: 100vh;
  background-color: #fff500;
  padding: 16px;
}
.list {
  padding-bottom: 16px;
}
.button {
  width: 200px;
  height: 50px;
  margin: auto;
  background-color: #ddd500;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.button.endScroll {
  position: static;
  transform: translateX(0%);
}

<div class="menu">
  <div class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium aperiam doloribus vero possimus, harum quo ratione nisi iusto eaque magnam perferendis? Quisquam animi consectetur adipisci fugiat qui obcaecati asperiores suscipit?
  Illo quaerat praesentium quia quasi fugit optio doloribus consequatur. Asperiores ad nisi illo neque aliquid sit, quasi repellendus architecto nam error, ea tenetur veniam, expedita aperiam itaque! Est, tempora labore.
  Fugiat error, neque necessitatibus blanditiis sint cum voluptates recusandae quae, nulla minus quibusdam ipsa dolore, impedit adipisci quam vel ipsam voluptatem aliquid! Dolores nostrum excepturi dolor modi nihil, cupiditate necessitatibus.</div>
    <div class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium aperiam doloribus vero possimus, harum quo ratione nisi iusto eaque magnam perferendis? Quisquam animi consectetur adipisci fugiat qui obcaecati asperiores suscipit?
  Illo quaerat praesentium quia quasi fugit optio doloribus consequatur. Asperiores ad nisi illo neque aliquid sit, quasi repellendus architecto nam error, ea tenetur veniam, expedita aperiam itaque! Est, tempora labore.
  Fugiat error, neque necessitatibus blanditiis sint cum voluptates recusandae quae, nulla minus quibusdam ipsa dolore, impedit adipisci quam vel ipsam voluptatem aliquid! Dolores nostrum excepturi dolor modi nihil, cupiditate necessitatibus.</div>
    <div class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium aperiam doloribus vero possimus, harum quo ratione nisi iusto eaque magnam perferendis? Quisquam animi consectetur adipisci fugiat qui obcaecati asperiores suscipit?
  Illo quaerat praesentium quia quasi fugit optio doloribus consequatur. Asperiores ad nisi illo neque aliquid sit, quasi repellendus architecto nam error, ea tenetur veniam, expedita aperiam itaque! Est, tempora labore.
  Fugiat error, neque necessitatibus blanditiis sint cum voluptates recusandae quae, nulla minus quibusdam ipsa dolore, impedit adipisci quam vel ipsam voluptatem aliquid! Dolores nostrum excepturi dolor modi nihil, cupiditate necessitatibus.</div>
    <div class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium aperiam doloribus vero possimus, harum quo ratione nisi iusto eaque magnam perferendis? Quisquam animi consectetur adipisci fugiat qui obcaecati asperiores suscipit?
  Illo quaerat praesentium quia quasi fugit optio doloribus consequatur. Asperiores ad nisi illo neque aliquid sit, quasi repellendus architecto nam error, ea tenetur veniam, expedita aperiam itaque! Est, tempora labore.
  Fugiat error, neque necessitatibus blanditiis sint cum voluptates recusandae quae, nulla minus quibusdam ipsa dolore, impedit adipisci quam vel ipsam voluptatem aliquid! Dolores nostrum excepturi dolor modi nihil, cupiditate necessitatibus.</div>
  <div class="button">Clck me</div>
</div>

БЛОГ НА HUSL

Плавное изменение position для кнопки

Ответы (0 шт):