如何用jQuery做到這一點?jQuery:固定在Facebook和Twitter的頂級菜單
我知道如何做到這一點與CSS(位置:固定),但IE問題(不知道固定位置)擔心我。
也許有一些插件,但我沒有找到它...
謝謝!
如何用jQuery做到這一點?jQuery:固定在Facebook和Twitter的頂級菜單
我知道如何做到這一點與CSS(位置:固定),但IE問題(不知道固定位置)擔心我。
也許有一些插件,但我沒有找到它...
謝謝!
關於css位置固定以及如何在IE6及更高版本上完成此操作,有一篇很棒的文章here。如果你需要任何幫助,請告訴我。
position: fixed;
是position: absolute; position: relative;
和position: static;
的替代方案。 position: fixed;
與position: absolute;
基本相同,區別在於當用戶滾動頁面時,元素不會隨其滾動,而只是說明它在哪裏
問題是,最受歡迎的瀏覽器--Windows Internet Explorer不理解它,而不是恢復到position: absolute;
,這會比沒有好,它將恢復到由CSS標準指定的position: static;
。這與完全沒有定位相同。請注意,從測試版2向上的IE 7支持position: fixed;
有些作者使用> 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]-->
看看這個頁面:http://tagsoup.com/cookbook/css/fixed/它會允許你只使用,而不必使用JavaScript CSS 。 – 2011-12-13 17:21:49