slashdotのコメントフィルタリングメニューのような固定位置のメニューを得るには

Question

Slashdotには、コメントのしきい値を微調整して下りのコメントを除外できる小さなウィジェットがあります。ページの上部にスクロールすると1か所になり、元のホームがページをスクロールしようとしているある時点でスクロールすると、固定位置に切り替わり、画面上にとどまります。 （例を見るには、hereをクリックしてください）

私の質問は、スクロールアップしたときにメニューを1つにして、ユーザーがスクロールしたときに固定の位置に切り替えるのと同じ効果を達成するにはどうすればよいですか？私はこれがCSSとjavascriptの組み合わせを含むことを知っています。必ずしもコードの完全な例を探しているわけではありませんが、コードを実行するにはどのような手順が必要ですか？

Answer 1

さて、私はそれを理解しました。他の人を助ける場合に備えてここに掲載します。この解決策では、prototypeと、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