как сделать плавающий блок со смещением

Question

Есть текст, в центре кнопка. Нужно чтобы она при скролле изначально плавно сузилась, при этом сместилась вправо, и затем при скролле зафиксировалась внизу страницы.
Сейчас проблема в том, что она прыгает, а нужно что бы плавно смещалась.

<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maioreunde sed. Nihil, excepturi.</div>
<a href="#" class="button"><span class="link__text">кнопка</span></a>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<style>
        .button {
          margin-right: 100px;
          width: 320px;
          padding: 25px 145px 25px 60px;
          border: 3px solid #53CCEB;
          border-radius: 20px;
          z-index: 999;
          transition: 0.9s;
        }

        .button_small {
          position: fixed;
          right: 0px;
          transition: 0.9s linear all;
          -webkit-transition: 0.9s linear all;
          -moz-transition: 0.9s linear all;
          -o-transition: 0.9s linear all;
          border-radius: 50%;
          margin-right: 30px;
          background-color: #000;
        }
</style>
<script>
        let btn = document.querySelector(".button");
        let text = document.querySelector(".link__text");
        let btnCoordinates = btn.getBoundingClientRect().y;

        function showButton() {
          if (window.pageYOffset >= btnCoordinates) {
            text.style.opacity = "0";
            btn.style.height = "80px";
            btn.style.width = "80px";
            btn.style.padding = "10px";
            document
              .querySelector(".button")
              .classList.add("button_small");
          } else {
            document
              .querySelector(".button")
              .classList.remove("button_small");
            btn.style.width = "300px";
            btn.style.padding = 25px 145px 25px 60px;
            text.style.opacity = "1";
          }
        }

        window.onscroll = showButton;
</script>'

Answer 1

Не совсем конечно понятна эта задача с "выныриванием" кнопки из середины текста. Но вот вам решение, где манипулировать кнопкой вы можете уже самостоятельно, когда расстояние от кнопки до верхнего края экрана остается <= Npx (значение rect.top <= 100 &&). Также самостоятельно и переводите кнопку из position: relative; в position: fixed;.

function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top <= 100 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}
$(window).scroll(function() {
  $("button").each(function(index, element) {
    if (isInViewport(element)) {
      $(this).addClass('button__active');
    } else
      $(this).removeClass('button__active');

  })
})

div {
  width: 200px;
  margin: 10px;
  text-align: justify;
}

button {
  width: 200px;
  height: 50px;
  transition: all 2s;
}

.button__active {
  height: 25px;
  margin-left: 51%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maioreunde sed. Nihil, excepturi.</div>
<button>кнопка</button>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>
<div>Eligendi necessitatibus odio quasi officiis itaque fugit doloribus, numquam expedita totam facilis sit laborum dolores repellendus aliquam provident velit et accusamus reiciendis voluptates eaque inventore maiores unde sed. Nihil, excepturi.</div>

БЛОГ НА HUSL

как сделать плавающий блок со смещением

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