Как я могу получить меню с фиксированной позицией, такое как меню фильтрации комментариев slashdot
У Slashdot есть небольшой виджет, который позволяет вам настроить порог комментариев, чтобы отфильтровать комментарии с пониженными модификациями. Он будет в одном месте, если вы прокрутите до верхней части страницы, и, когда вы прокрутите вниз, в какой-то момент, когда его исходный дом собирается прокрутить страницу, он переключится в фиксированное положение и останется на вашем экране. . (Чтобы увидеть пример, щелкните здесь.)
Мой вопрос: как я могу добиться того же эффекта, когда меню находится в одном месте при прокрутке вверх и переключается в фиксированное положение, когда пользователь прокручивает вниз? Я знаю, что это будет связано с комбинацией CSS и javascript. Я не обязательно ищу полный пример работающего кода, но какие шаги должен пройти мой код?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ладно, разобрался. Я отправлю его здесь, если он кому-то поможет. Это решение использует прототип и внутреннюю библиотеку, которая дает мне функции 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;
}
}
});
Просто вызовите конструктор с идентификатором вашего меню, и класс возьмет его оттуда.
Спасибо за попытку поделиться этим кодом. Я внес несколько небольших изменений, чтобы он работал с текущим выпуском 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;
}
}
});
Для демонстрации, но не на основе кода выше, проверка:
Примечание: некоторые люди ненавидят это меню. Просто взгляните на все скрипты Greasemonkey, которые от него избавляются.