IE7：无法让菜单贴在页面顶部 [英] IE7: can't get menu to stick to top of page

问题描述

在这里演示：

http://jsfiddle.net / auMd5 /

我想让蓝色菜单栏在滚过它时粘在页面顶部，然后快速回到原来的状态向后滚动它时的位置。在我测试的每个其他浏览器中，让jQuery有条件地将菜单的位置从 relative 切换到已修复有效。但它在IE7中不起作用。

I want the blue menu bar to stick to the top of the page when you scroll past it, and then to snap back to its original position when you scroll back up over it. In every other browser I've tested, having jQuery conditionally switch the menu's position from relative to fixed works. But it doesn't work in IE7.

为了测试，我尝试删除所有JavaScript并设置位置到CSS中的修复。这看起来应该在IE7中。

To test, I've tried removing all the JavaScript and setting the position to fixed in the CSS. This looks as it should in IE7.

另外要测试，我有条件 if（$（'table＃menu'）。 position（）。top + 10< = $（window）.scrollTop（））触发警报。它工作，这意味着IE7识别事件。

Also to test, I've had the condition if ($('table#menu').position().top + 10 <= $(window).scrollTop()) trigger an alert. It works, meaning that IE7 recognizes the event.

所以我想要的CSS静态工作，JavaScript条件正常。关于问题可能是什么想法？

So the CSS I want works statically, and the JavaScript condition is working. Any ideas on what the issue could be?

推荐答案

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

It seems that if you .remove() the DOM element, change it's CSS, and then add it back to the DOM it works as expected in 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/

这篇关于IE7：无法让菜单贴在页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！