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

Question

此处演示:

http://jsfiddle.net/auMd5/

我想让蓝色菜单栏在你滚动过它的时候贴在页面的顶部，然后在你滚动到它上面的时候快速回到它的原始位置。在我测试过的所有其他浏览器中，使用jQuery有条件地将菜单的position从relative切换到fixed工作。但在IE7中不能使用。

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

也是为了测试，我有条件if ($('table#menu').position().top + 10 <= $(window).scrollTop())触发警报。这意味着IE7可以识别该事件。

所以我想要的CSS静态工作，JavaScript条件是工作的。有什么想法吗?

Answer 1

如果您.remove() DOM元素，改变它的CSS，然后将其添加回DOM，它在IE 7中按预期工作:

$(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/