jQuery：FacebookやTwitterなどの固定トップメニュー

Question

jQueryでこれを行う方法は？

私はcss（位置：固定）でこれを行う方法を知っていますが、IEの問題（固定位置についてはわかりません）は私を心配しています。

はたぶん、いくつかのプラグインがあり、私はそれを見つけることができませんでした...

ありがとう！

Answer 1

CSSの位置が固定され、IE6以上でこれを達成する方法についての素晴らしい記事hereがあります。何か助けが必要なら私に知らせてください。

Answer 2

position: fixed;は、position: absolute; position: relative;とposition: static;の代替品です。 Windows用のInternet Explorer - - ないposition: fixed;は、要素はそれでスクロールしない時にユーザーがスクロールページ、それはちょうどそれが

た場所を正確に問題は最も人気のあるブラウザがあることであると言うことを基本的に除いposition: absolute;と同じですそれを理解しておらず、何よりも良いposition: absolute;に戻す代わりに、CSS標準で指定されているようにposition: static;に戻ります。これは、全く位置決めをしないのと同じ効果を有する。筆者の中には、> CSSセレクタを使ってInternet Explorerを分離し、スクロールエフェクトを使わずにそのブラウザに要素を絶対配置したままにしておくものがあります。

div#fixme { position: absolute; left: 0px; top: 0px; } 
body > div#fixme { position: fixed; } 

または

div#fixme { 
    left: expression(document.body.scrollLeft + 'px'); 
    top: expression(document.body.scrollTop + 'px'); 
} 
body > div#fixme { position: fixed; left: 0px; top: 0px; } 

私は少し奇妙な何かに気づきました。値を変数に代入して、それをインライン式に代入すると、Internet Explorer 5.5と6で更新されました。これはややぎくしゃくしていますが、多くのスクリプト駆動位置決め技法ほど悪くありません。

top: expression((ignoreMe = document.body.scrollTop) + 'px'); 
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop 

または

<style type="text/css"> 
#fixme { 
    /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */ 
    position: absolute; right: 20px; bottom: 10px; 
} 
body > div#fixme { 
    /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */ 
    position: fixed; 
} 
</style> 
<!--[if gte IE 5.5]> 
<![if lt IE 7]> 
<style type="text/css"> 
div#fixme { 
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */ 
    right: auto; bottom: auto; 
    left: expression((-20 - fixme.offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px'); 
    top: expression((-10 - fixme.offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px'); 
} 
</style> 
<![endif]> 
<![endif]-->