Как я могу получить меню с фиксированной позицией, такое как меню фильтрации комментариев slashdot

Question

Slashdot имеет небольшой виджет, который позволяет настроить порог для комментариев, чтобы отфильтровывать комментарии, которые были изменены. Это будет в одном месте, если вы прокрутите до верхней части страницы, и, когда вы прокрутите вниз, в какой-то момент, когда его первоначальный дом собирается прокрутить страницу, он переключится в фиксированное положение и останется на вашем экране , (Чтобы увидеть пример, нажмите здесь .)

У меня вопрос: как я могу добиться того же эффекта, когда меню будет находиться в одном месте при прокрутке вверх и переключаться в фиксированное положение при прокрутке пользователя вниз? Я знаю, что это будет связано с сочетанием 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;
        }
    }
});

Просто вызовите конструктор с идентификатором вашего меню, и класс возьмет его оттуда.

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

Для демонстрации, но не на основе приведенного выше кода проверки:

фиксированные плавающие-элементы