Усовершенствованная липкая боковая панель jQuery

Я работаю над (липкой) прокруткой боковой панели. Проблема заключается в том, что большинство липких боковых панелей не учитывают, что боковая панель может быть выше, чем область просмотра (например, если в корзину добавлено много предметов (боковая панель)). Что я и пытаюсь решить. Вот требования:

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

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

  • Когда пользователь прокручивает обратно вверх, боковая панель прокручивается обратно к вершине и прилипает к верхней части окна просмотра.

  • Если высота боковой панели меньше, чем область просмотра, она должна быть липкой сверху при прокрутке вниз.

Так что, в целом, некоторая функциональность и не все так просто (я думаю). Наиболее близким к тому, что я пытаюсь достичь, является следующий пример: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php , но путь кода написано не вписывается в мою.

Пока что это то, что я сделал: DEMO

И код jQuery, который я использовал:

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) {
                    // Reached the bottom...
                    $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
                } else if ($window.scrollTop() <= offset.top) {
                    // Initial position...
                    $sidebar.stop().animate({ marginTop: 0 });
                }
            }
        }, 100); 
    });
}

});

10
задан Yunowork 25 March 2013 в 21:10
поделиться