Как сделать так, чтобы элемент скользил по области просмотра при прокрутке?

Question

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

В основном я хочу использовать эффект, который использует Magento и теперь Stack Overflow. То есть в столбце есть элемент, и при прокрутке вниз он прикрепляет к верхней части области просмотра. И после прокрутки вверх он возвращается в нормальный поток страниц.

This Ask A Question - хорошая страница для примера. Прокрутите вниз и просмотрите элемент «Как отформатировать» (возможно, потребуется уменьшить область просмотра, если у вас большой экран, чтобы увидеть эффект).

Я заметил, что это настройка position: fixed в CSS. JavaScript, однако, запутан.

Какой самый простой способ добиться этого эффекта? Доступен ли плагин jQuery?

Answer 1

Вот статья, которая должна помочь: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

Answer 2

Я заметил, что Google делает это в определенных местах, как здесь http://news.google.com/nwshp?hl=en (левая панель навигации). Из того, что я могу сказать, они проверяют положение на странице, а затем устанавливают элемент в фиксированное положение, когда страница прокручивается достаточно вниз, чтобы элемент начал прокручиваться за пределы экрана.

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

Вот пример в Ext, он, вероятно, очень помог бы, если бы у меня не было выбора в обработчике событий, но он работает.

Ext.fly(document).on("scroll", function(e,t,o){
    Ext.select(".pinnable").each(function(el,c,idx){
        var y = window.scrollY;
        if(!el.hasClass("pinned")){
            var ypos = el.getY();
            if(y>ypos){
                el.addClass("pinned");
                el.set({
                    originalY:ypos
                });
            }                   
        } else {
            var origy = el.getAttribute("originalY");
            if(origy && y<origy){
                el.removeClass("pinned")
            }
        }
    });     
});