Question

我已经用Google搜索了，但必须使用错误的关键字。

基本上我想使用Magento和现在Stack Overflow使用的效果。也就是说，列中有一个元素，当您向下滚动时，将粘贴到视口的顶部。一旦再次向上滚动，它就会回到正常的页面流程中。

这个问一个问题是一个很好的页面例如。向下滚动并观察“如何格式化”元素下降（如果您有一个大屏幕可以看到效果，可能需要缩小视口）。

我注意到它在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=en（左侧导航栏）。据我所知，他们检查页面上的位置，然后在页面向下滚动到足以让元素开始滚动屏幕时将项目设置到固定位置。

看起来像另一种方法，使用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")
            }
        }
    });     
});

如何在滚动时使元素与视口一起滑动？

2 个答案: