jQuery:固定的顶部菜单，像在Facebook和Twitter

jQuery: fixed top menu like in Facebook and Twitter

本文关键字：像在 Facebook Twitter 菜单 顶部 jQuery      更新时间：2023-09-26

如何用jQuery做到这一点?

我知道如何用css (position:fixed)做到这一点，但是IE的问题(不知道固定位置)让我担心。

可能有一些插件，但我没有找到它…

谢谢!

position: fixed;是position: absolute; position: relative;和position: static;的替代品。position: fixed;与position: absolute;基本相同，除了当用户滚动页面时，元素不与之一起滚动，它只是准确地显示

问题是最流行的浏览器——Internet Explorer for Windows——不理解它，它不是恢复到position: absolute;(这比什么都没有好)，而是恢复到position: static;(这是CSS标准指定的)。这与完全没有定位具有相同的效果。注意ie7 beta 2以上的版本支持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; }

我注意到一些有点奇怪的事情。如果我将值赋给一个变量，然后使用它将其赋给表达式inline，它在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]-->

这里有一篇很棒的文章关于css位置固定以及如何在IE6及以上版本上实现这一点。如果你需要任何帮助，请告诉我。

相关文章：