How to make a slide of an element with a viewport when it scrolls?

Question

I have Googled for this, but you must use the wrong keywords.

Basically I want to use the effect that Magento uses and now Stack Overflow. That is, there is an element in the column, and when you scroll down, it adheres to the top of the viewport. And as soon as it scrolls again, it returns to the normal page flow.

This question asks, for example, a good page. Scroll down and see how the “How to format” item comes off (maybe you need to reduce the size of the viewport if you have a large screen to see the effect).

I noticed that it installs position: fixedin CSS. However, JavaScript is confusing.

What is the easiest way to achieve this effect? Is there a jQuery plugin available?

Answer 1

Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

Answer 2

I noticed that Google does this in certain places, for example here http://news.google.com/nwshp?hl=en (left navigation bar). From what I can tell, they check the position on the page, and then set the element to a fixed position when the page scrolls enough so that the element starts to scroll the screen.

, , 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")
            }
        }
    });     
});