IE7: не может получить меню приставать к началу страницы

Question

Demo здесь:

http://jsfiddle.net/auMd5/

Я хочу синий бар меню, чтобы прилипнуть к началу страницы при прокрутке мимо него, а затем чтобы вернуться в исходное положение, когда вы прокручиваете резервную копию поверх него. В каждом другом браузере, который я тестировал, с jQuery условно переключаем position меню от relative до fixed. Но это не работает в IE7.

Чтобы проверить, я попытался удалить все JavaScript и установить position в fixed в CSS. Это выглядит так, как должно быть в 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/