IE7：无法让菜单贴在页面顶部

在这里演示：

http://jsfiddle.net/auMd5/

我希望当您滚过它时，蓝色菜单栏会粘在页面顶部，然后当您向上滚动它时，可以快速回到原始位置。 在我测试过的每个其他浏览器中，让jQuery有条件地将菜单的position从relative position切换到fixed position 。 但它在IE7中不起作用。

为了测试，我尝试删除所有JavaScript并将position设置为CSS中的fixed 。 这看起来应该在IE7中。

另外要测试，我有条件if ($('table#menu').position().top + 10 <= $(window).scrollTop())触发警报。 它有效，这意味着IE7可识别该事件。

所以我想要的CSS静态工作，JavaScript条件正常工作。 有关问题的任何想法？

Answer 1

看来如果你.remove() DOM元素，更改它的CSS，然后将它添加回它在IE 7中按预期工作的DOM：

 $(function() { //cache all the objects we will need and get the initial top offset for the #menu var $window = $(window), $menu = $('#menu'), menuTop = $menu.offset().top, $midWrap = $('#mid-wrap'); $window.scroll(function() { //cache a copy of the #menu object and get it's CSS position property var $tmp = $menu, position = $tmp.css('position'), windowTop = $window.scrollTop(); $menu.remove(); //if the position is not already set to fixed and the #menu element is above the fold if (position != 'fixed' && menuTop <= windowTop) { //remove the current #menu element from the DOM $menu.remove(); //set the position property of the new #menu element $tmp.css('position', 'fixed'); //re-insert the #menu item into the dom $midWrap.prepend($tmp); $menu = $tmp; //if the position is not already set to relative and the #menu element's offset is greater than how far the user has scrolled down } else if (position != 'relative' && menuTop > windowTop) { //remove the current #menu element from the DOM $menu.remove(); //set the position property of the new #menu element $tmp.css('position', 'relative'); //re-insert the #menu item into the dom $midWrap.prepend($tmp); $menu = $tmp; } }); }); 

这是一个演示： http ： //jsfiddle.net/auMd5/5/