[英]jQuery: fixed top menu like in Facebook and Twitter
How to do this with jQuery? 如何用jQuery做到这一点?
I know how to do this with css (position:fixed), but IE problems (doesn't know about fixed position) worry me. 我知道如何使用css(位置:固定),但IE问题(不知道固定位置)让我担心。
Maybe there is some plugin, but I didn't find it... 也许有一些插件,但我没有找到它......
Thanks! 谢谢!
position: fixed;
is an alternative to position: absolute; position: relative;
是
position: absolute; position: relative;
的替代品position: absolute; position: relative;
position: absolute; position: relative;
and position: static;
和
position: static;
. 。
position: fixed;
is basically the same as position: absolute;
与
position: absolute;
相同position: absolute;
except that when the user scrolls the page, the element does not scroll with it, it just says exactly where it was 除了当用户滚动页面时,元素不会随之滚动,它只是准确地说出它的位置
The problem is that the most popular browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute;
问题是最流行的浏览器--Windows的Internet Explorer - 不理解它,而不是恢复到
position: absolute;
which would be better than nothing, it reverts to position: static;
它会比没有好,它会恢复到
position: static;
as specified by the CSS standard. 按照CSS标准指定。 This has the same effect as having no positioning at all.
这与完全不定位具有相同的效果。 Note that IE 7 from beta 2 upwards does support
position: fixed;
请注意,从beta 2向上的IE 7确实支持
position: fixed;
Some authors use the > CSS selector to isolate Internet Explorer and leave the element positioned absolutely in that browser, without the scrolling effect. 一些作者使用> CSS选择器隔离Internet Explorer并将元素保留在该浏览器中,而没有滚动效果。
div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }
or 要么
div#fixme {
left: expression( document.body.scrollLeft + 'px' );
top: expression( document.body.scrollTop + 'px' );
}
body > div#fixme { position: fixed; left: 0px; top: 0px; }
I noticed something slightly odd. 我发现有些奇怪的东西。 If I assigned the value to a variable, then used that to assign it to the expression inline, it did update in Internet Explorer 5.5 and 6. It is slightly jerky, but not as bad as many script driven positioning techniques.
如果我将值赋给变量,然后使用它将其分配给内联表达式,它确实在Internet Explorer 5.5和6中更新。它稍微不稳定,但没有许多脚本驱动的定位技术那么糟糕。
top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
or 要么
<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]-->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.