Slashdot 有一个小部件,可让您调整评论阈值以过滤掉修改后的评论。如果您滚动到页面顶部,它将在一个位置,并且当您向下滚动时,在某个点,它的原始主页即将滚动离开页面,它将切换到固定位置,并停留在您的屏幕上. (要查看示例,请单击此处。)
我的问题是,如何实现向上滚动时将菜单放在一个位置并在用户向下滚动时切换到固定位置的相同效果?我知道这将涉及 CSS 和 javascript 的组合。我不一定要寻找工作代码的完整示例,但我的代码需要经过哪些步骤?
Slashdot 有一个小部件,可让您调整评论阈值以过滤掉修改后的评论。如果您滚动到页面顶部,它将在一个位置,并且当您向下滚动时,在某个点,它的原始主页即将滚动离开页面,它将切换到固定位置,并停留在您的屏幕上. (要查看示例,请单击此处。)
我的问题是,如何实现向上滚动时将菜单放在一个位置并在用户向下滚动时切换到固定位置的相同效果?我知道这将涉及 CSS 和 javascript 的组合。我不一定要寻找工作代码的完整示例,但我的代码需要经过哪些步骤?
好吧,我想通了。我会把它贴在这里,以防它帮助其他人。这个解决方案使用原型和一个内部库,它为我提供了 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;
}
}
});
只需使用菜单的 id 调用构造函数,该类将从那里获取它。
感谢您分享此代码的努力。我做了一些小的改动,使它与当前版本的 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;
}
}
});
对于一个演示,但不是基于上面的代码结帐: