открепить элемент прижатый к низу экрана при достижении блока при скролле

135

19 июля 2021, 02:50

Есть блок с текстом, где расположены 3 ссылки и есть блок с картинкой(сиденья). Сиденья имеют стили

.chairs{
position:fixed;
bottom:0
}

они всегда приклеены к низу экрана Мне нужно сделать так, чтобы когда я доходил до блока с ссылками, блок с сиденьями останавливался и было так,как на картинке, а когда скролил обратно наверх он откреплялся и опять был приклеен к низу экрана

структура

<body>
 <img class="chairs" src="images/Chairs.png" alt="">
<div class="center"></div>
 <div class="footer"></div>
</body>

сейчас я сделал на js чтото такое, но это работает неплавно и не работает в обратную сторону

<script>
       $(function() {
        function chairsmove() {
        let css = {     
            'position':'absolute',     
        'bottom': '0',
        'transition': '1s' }
        $('.chairs').css(css);
    }
    var blockTop = $('.footer').offset().top;
    var $window = $(window);
    $window.on('load scroll', function() {
        var top = $window.scrollTop();
        var height = $window.height();
        if (top + height >= blockTop) {
            chairsmove();
        }
    });
});
    </script>

Answer 1

 <script>
        $(function () {
            function chairsDontMove() {
                let css = {
                    'position': 'absolute',
                    'bottom': '0',
                    'transition': '1s'
                }
                $('.chairs').css(css);
            }
            function chairsmove() {
                let css = {
                    'position': 'fixed',
                    'bottom': '0',
                    'transition': '1s'
                }
                $('.chairs').css(css);
            }
            var blockTop = $('.footer').offset().top;
            var $window = $(window);
            $window.on('load scroll', function () {
                var top = $window.scrollTop();
                var height = $window.height();
                if (top + height >= blockTop) {
                    chairsDontMove();
                } else {
                    chairsmove()
                }
            });
        });
    </script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Navbar в слайдере

Каким способом можно navbar вытянуть на слайдер поверх его??? Чтобы под ним фон менялся, а сам navbarоставался там же Смотрел сайт У него была такая...

290