Как плавно зафиксировать элемент внизу страницы при прокрутке

Question

Есть текст на странице, под ним по центру идет кнопка на странице, и далее снова текст, и нужно чтобы при прокрутке странице кнопка не исчезала из поля видимости, а была зафиксирована внизу слева, для этого нужно что бы при прокрутке, кнопка должна сначала переместилась влево, а затем зафиксировалась внизу страницы.
Пример разметки html:

<div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores vitae omnis, fugiat nesciunt? Illum maxime eaque blanditiis reprehenderit incidunt nulla animi, cupiditate possimus, accusamus quidem in eum tenetur quod voluptas!</div> <button style="margin: 10 px auto"> кнопка</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 class="main">
    <div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores vitae omnis, fugiat nesciunt? Illum maxime eaque blanditiis reprehenderit incidunt nulla animi, cupiditate possimus, accusamus quidem in eum tenetur quod voluptas!</div>
    <button class="button" id="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>
    <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>

Answer 1

    window.onload = function () { // При загрузке страницы
        let posbutton = document.getElementsByClassName('button')[0]; // Получаем кнопку по классу
        let yc = posbutton.getBoundingClientRect().y; // Получаем его координаты Y
        window.addEventListener('scroll', function () { // Отслеживаем скролл
            let yy = window.pageYOffset; // Получаем координаты страницы при прокрутке
            if (yy >= yc){ // Если координаты Y страницы больше y элемента, то...
                posbutton.style.position = "fixed"; // Фиксируем положение кнопки
                posbutton.style.bottom = '0px'; // Прижимаем книзу
            } else {
                posbutton.style.position = "relative"; // Если больше, то возвращаем обратно.
            }
        })
    }

    .main{
        width: 200px;
    }
    .button{
        margin: auto;
        left: 35%;
    }

<div class="main">
    <div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores vitae omnis, fugiat nesciunt? Illum maxime eaque blanditiis reprehenderit incidunt nulla animi, cupiditate possimus, accusamus quidem in eum tenetur quod voluptas!</div>
    <button class="button" id="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>
    <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>

БЛОГ НА HUSL

Как плавно зафиксировать элемент внизу страницы при прокрутке

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