Держите элемент фиксированным в контейнере во время прокрутки окна - PullRequest
Новая
       34

Держите элемент фиксированным в контейнере во время прокрутки окна

12 голосов
/ 09 февраля 2012

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

enter image description here

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

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

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

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

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

Ответы [ 2 ]

3 голосов
/ 09 февраля 2012

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

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

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

0 голосов
/ 24 мая 2015

Для некоторых адаптивных страниц или при изменении размера браузера боковые панели становятся центральным элементом. так что вы можете позаботиться о точке торможения. Я использовал 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>
...