Помощь с прокруткой / следовать боковой панели

Question

использовал технику jquery, чтобы иметь боковую панель прокрутки / следования от css-tricks.com, вот код, если вы не знаете, о чем я говорю:

$(function() {

        var $sidebar   = $("#scroll-menu"),
            $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
                });
            }
        });

    });

также здесь есть ссылка http://css -tricks.com / scrollfollow-sidebar /

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

Вот изображение того, что происходит: http://tinypic.com/r/2mcj2mv/7

Заранее спасибо

Answer 1

Вам просто нужно добавить дополнительный условный оператор, который ничего не делает, если $(window).scrollTop() больше определенного порога. Проблема заключается в установке этого порога, так как я предполагаю, что вы хотите, чтобы он работал на страницах различной высоты. К счастью, мы можем использовать смещение нижнего колонтитула и высоту боковой панели, чтобы определить этот порог. Следующим может потребоваться некоторая настройка для вашей конкретной ситуации, но в основном:

$(function() {

    var $sidebar   = $("#scroll-menu"),
        $window    = $(window),
        $footer    = $("#footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(); // may need to tweak
        topPadding = 15;

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

});