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

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

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

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

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

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

Итак, все в целом довольно функционально и не так просто (я думаю). Самый близкий, который я видел к тому, чего я пытаюсь достичь, - это пример: 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); 
    });
}

});

Ответы

Ответ 1

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

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

Для вашего текущего запроса вам просто нужно прокрутить эту позицию фиксированного div (который также сделан на 100% высоты) программно, основываясь на том, как далеко они прокручиваются. Взгляните на мой пример и посмотрите, есть ли этот эффект: http://jsfiddle.net/ZHP52/1/

здесь jquery:

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

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

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height.
var sidebarHeight = $sidebar.height();

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

    $window.scroll(function() {

        if ($content.height() > sidebarHeight) {
            var new_margin = $window.scrollTop() - offset.top;
            if ($window.scrollTop() > offset.top) {
                // Fix sidebar
                $sidebar.addClass("fixed");
                // Scroll it the appropriate ammount
                $sidebar.scrollTop(new_margin);            
            }else{
                $sidebar.removeClass("fixed");
            }
        }
    });
}

});

Ответ 2

Я верю, что это функциональность, которую вы ищете: http://jsfiddle.net/JVe8T/7/

Извините за беспорядочный код, но его довольно легко оптимизировать. Я также предположил, что sidebar2 (нелипкий) имеет определенную высоту, если это не так, вы можете просто обнаружить его с помощью jquery и использовать селектор .css для нижнего смещения.

Здесь мой код:

jQuery(document).ready(function() {

    var tmpWindow = $(window),
        sidebar = $('.sidebar'),
        content = $('.content'),
        sidebar1 = $('.sidebar1'),
        sidebar2 = $('.sidebar2'),
        viewportHeight = $(window).height(),
        sidebarHeight = sidebar.height(),
        sidebar1Height = sidebar1.height(),
        sidebar2Height = sidebar2.height(),
        offsetBottom;


    tmpWindow.scroll(function(){

        offsetBottom = content.height() - sidebar2Height;

        //if sidebar height is less that viewport
        if (viewportHeight > sidebarHeight) {
            sidebar.addClass('fixed');
        } 

        //sticky sidebar1
        if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height ) {
            sidebar1.addClass('bottom');
        } else {
            sidebar1.removeClass('bottom');
        }

        //end of content, visible sidebar2
        if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) {
            sidebar1.removeClass('bottom');
            sidebar1.addClass('fixedBottom');
        } else {
            sidebar1.removeClass('fixedBottom');
        }

    });

});

Ответ 3

Отъезд hcSticky, я просто искал это. Это своего рода "идеальная" липкая боковая панель и может также эмулировать другие библиотеки с опциями.

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

Проверьте это: http://someweblog.com/demo/hcsticky/