Slashdot has a little widget that allows you to tweak your ment threshold to filter out down-modded ments. It will be in one place if you scroll to the top of the page, and as you scroll down, at some point, where its original home is about to scroll off the page, it will switch to fixed position, and stay on your screen. (To see an example, click here.)

My question is, how can I acplish the same effect of having a menu be in one place when scrolled up, and switch to fixed position as the user scrolls down? I know this will involve a bination of CSS and javascript. I'm not necessarily looking for a full example of working code, but what steps will my code need to go through?

Slashdot has a little widget that allows you to tweak your ment threshold to filter out down-modded ments. It will be in one place if you scroll to the top of the page, and as you scroll down, at some point, where its original home is about to scroll off the page, it will switch to fixed position, and stay on your screen. (To see an example, click here.)

My question is, how can I acplish the same effect of having a menu be in one place when scrolled up, and switch to fixed position as the user scrolls down? I know this will involve a bination of CSS and javascript. I'm not necessarily looking for a full example of working code, but what steps will my code need to go through?

• javascript
• css

• 1 Side note: some people hate that menu. Just take a look at all the Greasemonkey scripts that get rid of it. – Chase Seibert Commented Jan 24, 2009 at 17:11

3 Answers 3

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.

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

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

fixed-floating-elements