Question

Slashdot有一个小小部件，允许您调整评论阈值以过滤掉下调的评论。如果您滚动到页面顶部，它会在一个地方，当您向下滚动时，在其原始主页即将滚动页面的某个位置，它将切换到固定位置，并保持在屏幕上。（要查看示例，请单击here。）

我的问题是，如何在向上滚动时将菜单放在一个位置，并在用户向下滚动时切换到固定位置？我知道这将涉及CSS和JavaScript的组合。我不一定在寻找工作代码的完整示例，但我的代码需要执行哪些步骤？

Answer 1

好的，我明白了。我会在这里发布，以防它帮助其他人。这个解决方案使用了原型，以及一个内部库，它为我提供了registerEvent，getElementX和getElementY函数，它们可以实现您的想象。

var MenuManager = Class.create({
    initialize: function initialize(menuElt) {
        this.menu = $(menuElt);
        this.homePosn = { x: getElementX(this.menu), y: getElementY(this.menu) };
        registerEvent(document, 'scroll', this.handleScroll.bind(this));
        this.handleScroll();
    },
    handleScroll: function handleScroll() {
        this.scrollOffset = document.viewport.getScrollOffsets().top;
        if (this.scrollOffset > this.homePosn.y) {
            this.menu.style.position = 'fixed';
            this.menu.style.top = 0;
            this.menu.style.left = this.homePosn.x;
        } else {
            this.menu.style.position = 'absolute';
            this.menu.style.top = null;
            this.menu.style.left = null;
        }
    }
});

只需使用菜单的id调用构造函数，类就会从那里获取它。

Answer 2

感谢您分享此代码的努力。我做了一些小改动，使其适用于Prototype的当前版本。

var TableHeaderManager = Class.create({
    initialize: function initialize(headerElt) {
        this.tableHeader = $(headerElt);
        this.homePosn = { x: this.tableHeader.cumulativeOffset()[0], y: this.tableHeader.cumulativeOffset()[1] };
        Event.observe(window, 'scroll', this.handleScroll.bind(this));
        this.handleScroll();
    },
    handleScroll: function handleScroll() {
        this.scrollOffset = document.viewport.getScrollOffsets().top;
        if (this.scrollOffset > this.homePosn.y) {
            this.tableHeader.style.position = 'fixed';
            this.tableHeader.style.top = 0;
            this.tableHeader.style.left = this.homePosn.x;
        } else {
            this.tableHeader.style.position = 'absolute';
            this.tableHeader.style.top = null;
            this.tableHeader.style.left = null;
        }
    }
});

Answer 3

对于演示，但不是基于以上代码结帐：

fixed-floating-elements

如何获得像slashdot的评论过滤菜单这样的固定位置菜单

3 个答案: