Javascript 如何获得像slashdot'；s评论过滤菜单

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

---

我的问题是，我怎样才能达到这样的效果：当用户向上滚动时，菜单在一个地方，当用户向下滚动时，切换到固定位置？我知道这将涉及CSS和javascript的组合。我不一定要寻找工作代码的完整示例，但我的代码需要经过哪些步骤？

好的，我已经找到了答案。我会把它贴在这里，以防对其他人有所帮助。该解决方案使用prototype和一个内部库，该库为我提供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调用构造函数，类就会从那里获取它。

感谢您为共享此代码所做的努力。 我做了一些小的修改，使其与当前版本的原型一起工作

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

---

对于演示，但不基于上述代码签出：

---

旁注：有些人讨厌那个菜单。只要看看那些摆脱它的Greasemonkey脚本就知道了。