【发布时间】：2012-11-12 09:33:48
【问题描述】：
我正在尝试实现一个“粘性”导航菜单 - 当导航栏在滚动时到达屏幕顶部时切换到固定位置的菜单项。
这在 Firefox 和 Chrome 中是一种享受，但在 Internet Explorer 中（在 9 中测试），当滚动到达某个点并且位置切换到固定时，所有子 <li> 都会消失（但 @987654323包含它们的 @ 保持相同大小。
我正在尝试使用 jQuery 来做这件事（这是我的代码）：
<script type="text/javascript">
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#navigation').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if ((scroll_top + 40) > sticky_navigation_offset_top) {
$('#navigation').css({ 'position': 'fixed', 'top':40, 'left':0 });
} else {
$('#navigation').css({ 'position': 'static', 'margin-top': 0 });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
</script>
很遗憾，我无法证明这一点，因为它是在我们需要登录的安全网站上实现的。希望我说得有道理。如有需要，我可以提供屏幕截图。
编辑：我应该提一下，当位置为static 时，菜单项在 IE9 中正确显示。当我向下滑动时，菜单变为fixed，菜单项消失了！
另一个编辑：我第一次使用 jsfiddle.net 所以希望它可以工作http://jsfiddle.net/ecm5L/
【问题讨论】：
-
你能不能做一个显示问题的小提琴？如果你强迫人们自己重现问题，你不太可能得到帮助
-
如果你能在菜单上显示标记也真的很有帮助
-
所有标记现在显示在提供的链接中。
-
ie7 和 8 怎么样。工作正常吗？
-
不知道 - jsFiddle 似乎不适用于 IETester。我的机器上没有安装 IE7 和 IE8。