How can I get a fixed-position menu like slashdot's comment filtration menu

Question

Slashdot has a little widget that allows you to tweak your comment threshold to filter out down-modded comments. It will be in one place if you scroll to the top of the pag

Answer 1

Okay, I figured it out. I will post it here in case it help anyone else. This solution uses prototype, and an internal library that gives me the registerEvent, getElementX and getElementY functions, which do what you would think.

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

Just call the constructor with the id of your menu, and the class will take it from there.

Answer 2

Thanks for the effort of sharing this code. I made some small changes to make it work with the current release of 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

For a demo but not based on the code above checkout:

fixed-floating-elements