Хранить элемент в контейнере во время прокрутки окна

У меня есть вопрос, который, по моему мнению, будет лучше всего объяснен с помощью изображения, поэтому я собираюсь его прикрепить.

Хорошо, так что в основном у меня есть родительский контейнер и элемент внутри него (он будет фактически блоком текста), который мы будем называть элементом FIXED.

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

В настоящее время для этого нет HTML-кода или чего-то еще, потому что я нахожусь на стадии предварительного рисования этого сайта.

Я открыт для использования jQuery или javascript в целом, мои навыки JS ограничены, и я знаком с jQuery, но я не против копирования и вставки кода и возиться с ним.

Любая помощь будет принята с благодарностью. Спасибо!

Ответ 1

Что вы хотите использовать с помощью javascript (с jQuery или без него), это изменение позиции элемента абсолютно против позиции родителя, родитель должен быть относительным. Вы изменяете позицию в зависимости от положения полосы прокрутки.

В этом руководстве есть хорошее объяснение того, как это сделать.

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Ответ 2

Для некоторых отзывчивых страниц или при изменении размера вашего браузера боковые панели становятся центральным элементом. поэтому вы можете захотеть позаботиться о тормозной точке. Я использовал 786. Кроме того, div сначала не может быть расположен сверху, поэтому вы должны установить смещение по коду.

<script>
    $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv");
        var $div_top = $scrollingDiv.offset().top;
        $(window).scroll(function(){
            if(window.outerWidth > 786) {
                var $scroll_top = $(window).scrollTop();
                if($scroll_top > $div_top) {
                    $pos = $scroll_top - $div_top;
                    $scrollingDiv
                        .stop()
                        .animate({"top": $pos + "px"}, "slow" );
                } else if($('#scrollingDiv').offset().top > $div_top) {
                    $scrollingDiv
                        .stop()
                        .animate({"top": "0px"}, "slow" );
                }
            } else {
                $scrollingDiv.css("top", 0); // sidebar became center object
            }
        });
        $(window).resize(function() {
            if(window.outerWidth > 786) {
                var $scroll_top = $(window).scrollTop();
                if($scroll_top > $div_top) {
                    $pos = $scroll_top - $div_top;
                    $scrollingDiv
                        .stop()
                        .animate({"top": $pos + "px"}, "slow" );
                } else if($('#scrollingDiv').offset().top > $div_top) {
                    $scrollingDiv
                        .stop()
                        .animate({"top": "0px"}, "slow" );
                }
            } else {
                $scrollingDiv.css("top", 0); // sidebar became center object
            }
        });
    });
</script>