我怎样才能得到像slashdot的评论过滤菜单这样的固定位置菜单

Question

Slashdot有一个小部件，它允许您调整评论阈值以过滤掉下层的评论。如果您滚动到页面的顶部，则它将位于同一位置，并且当您向下滚动时，在某个时刻，其原始主页即将滚动页面的位置，它将切换到固定位置，并保持在屏幕上。 （要查看示例，请单击here。）

我的问题是，如何在滚动时让一个菜单位于同一位置并在用户向下滚动时切换到固定位置？我知道这将涉及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; 
     } 
    } 
}); 

只需调用带有菜单ID的构造函数，然后该类就会从中取出它。

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

为了演示而不是基于上面结账代码：

fixed-floating-elements