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

admin管理员组

文章数量:1024320

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

Share Improve this question Follow asked Sep 11, 2008 at 14:09 pkaedingpkaeding 37.8k3131 gold badges106106 silver badges142142 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

Share Improve this question Follow asked Sep 11, 2008 at 14:09 pkaedingpkaeding 37.8k3131 gold badges106106 silver badges142142 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptHow can I get a fixedposition menu like slashdot39s comment filtration menuStack Overflow