滾動時如何在視口中滑動元素？

Question

我已經為此進行了Google搜索，但必須使用錯誤的關鍵字。

基本上，我想使用Magento和現在Stack Overflow使用的效果。 也就是說，一列中有一個元素，當您向下滾動時，它會停留在視口的頂部。 再次向上滾動后，它將返回正常的頁面流。

例如，此“提問”是一個很好的頁面。 向下滾動並觀看“ How to Format”元素的下降（如果您有大屏幕才能看到效果，則可能需要縮小視口）。

我注意到它正在設置position: fixed在CSS中已position: fixed 。 但是，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=zh-CN （左側導航欄）。 據我所知，他們會檢查頁面上的位置，然后在頁面向下滾動足以使元素開始在屏幕外滾動時將項目設置為固定位置。

看起來與另一種方法類似，使用jQuery設置頂部邊距將允許元素滯后並變得斷斷續續（如果您不使用動畫），因為javascript必須繼續定位元素。

這是Ext中的一個示例，如果我在事件處理程序中沒有select的話，可能會很有幫助，但是它可以工作。

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