Держите div внутри порта просмотра или произвольного div при прокрутке - PullRequest
Новая
       8

Держите div внутри порта просмотра или произвольного div при прокрутке

1 голос
/ 29 ноября 2009

Я пытаюсь найти сценарий сценария (или создать его), который удерживает вертикальную панель навигации "липкой" внутри моего окна просмотра. Хотя это может быть не чёрная магия (можно использовать position: fixed css), есть проблема с этим подходом: если панель навигации длиннее высоты области просмотра, посетитель не сможет увидеть всю навигацию целиком. Поэтому я хочу, чтобы панель навигации не покидала область просмотра сверху, но не оставляла родительский контейнер внизу. Он должен следовать за событиями прокрутки мгновенно без причудливой / прыгающей анимации.

Это возможно? Google не показал ничего полезного для меня. Подобный эффект вы можете узнать из навигатора комментариев к статье на slashdot или из окна проигрывателя видео Google.

Обновление: По сути, это будет переписать плагин jQuery scrollFollow . Не было бы проблем, если бы не хватало анимаций, поскольку я не буду ими пользоваться. Но он должен иметь возможность оставаться в пределах определенного родительского контейнера без отсечения. Обработка файлов cookie не требуется.

Ответы [ 2 ]

8 голосов
/ 03 февраля 2011

Я знаю, что это действительно старо, но наткнулся на это, пытаясь найти собственное решение

Эта ссылка показывает, как это сделать действительно легким способом. По сути, все, что вам нужно, это следующий код (вместе с загруженным jQuery, конечно) 

$(function() {
    var $sidebar   = $("#siderbar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
})

Если вы не хотите анимировать анимацию, просто замените разделы анимации следующим образом: 

$sidebar.stop().animate({ marginTop: VALUE });

с 

$sidebar.css("marginTop", VALUE);
3 голосов
/ 02 июля 2013

Я знаю, что эта проблема старая, но она возникла в моем поиске в Google, чтобы сделать пребывание на странице для прокрутки. Это решение работает довольно хорошо и не позволяет странице иметь бесконечную прокрутку в моей ситуации, как решение из @Chris выше.

Требуется добавить пустой div <div id="sticky-anchor"></div> над плавающим div в качестве якоря.

В этом примере div должен иметь id="sticky"

Решение: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Javascript: 

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

CSS: 

#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
}
...