在 IE 中滚动时元素位置从相对更改为固定

Question

我有一个我自己无法解决的问题，我也找不到解决方案。 我用 jQuery 编写了一个脚本，它适用于 Chrome 和 Firefox，但它不适用于 IE（即使是最新的）。

一目了然 HTML 看起来像这样::

<div id="ContentThatIsAbove"></div>
<div id="someContainer">
      <div id="bonmenu_info_container" style="float: left;">
           <div id="bonmenu_info"></div> 
           <div id="1_info"></div> 
           <div id="2_info"></div> 
           <div id="3_info"></div> 
      </div>
      <div id="bonmenu" style="float: right;">
           <div class="1"></div>
           <div class="2"></div>
           <div class="3"></div>
      </div>

</div>

一个像这样的 jQuery 脚本：('$j' 用来代替 '$')

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(window).load(function() {
    var MenuOffsetY = $j("#bonmenu").offset().top;
    $j(window).scroll(function(){
        if($j("html").position().top < -MenuOffsetY && $j("html").position().top >-1400 )
        {
            $j("#bonmenu_info_container").css('position', 'fixed');
            $j("#bonmenu_info_container").css('top', '0');  
            $j("#bonmenu_info_container").css('margin-top', '10px');
            $j("#bonmenu_info_container").fadeIn();
        }
        else if($j("html").position().top >= -MenuOffsetY)
        {
            $j("#bonmenu_info_container").css('position', 'relative');
            $j("#bonmenu_info_container").css('top', '');
            $j("#bonmenu_info_container").fadeIn(); 
        }
        else
        {
            $j("#bonmenu_info_container").fadeOut();
        }
    });
    $j("#bonmenu_info_container").children().hide();
    $j("#bonmenu_info").show();

    //This part below works perfectly everywhere.    
    $j("#bonmenu").mouseover(function(){
        $j(this).children().each(function(){
            var infoId = "#"+jQuery(this).attr('class')+"_info";
            $j(this).mouseover(function(){
                $j("#bonmenu_info_container").children().hide();
                $j(infoId).show();              
            });
        }); 
    }).mouseleave(function(){   
        $j("#bonmenu_info_container").children().hide();
        $j("#bonmenu_info").show();
    });
});
</script>

解释它应该如何工作：

我不希望#bonmenu_info_container 在滚动页面时消失在窗口顶部。这就是为什么在第一个 if statemant 中，我通过检查 html 的 position.top 值来检查 #bonmenu 是否在顶部消失。当该语句为真时，#bonmenu_info_container 的 css 位置值应从相对更改为固定，反之亦然。

您可以在 Chrome/FF 上查看它是如何工作的：http://bonappetea.com/menu

我在 Chrome/FF $('html').position().top 中注意到的内容在滚动时会发生变化，而在 IE 中则不会。你知道为什么吗？或者你有比我更好的解决方案吗？

我完全不知道如何处理这段代码，我不想从零开始。

Answer 1

是的，它没有。但是body的位置发生了变化，所以您需要检查发生了什么变化并采取相应的措施。

var preScrollHtml = document.getElementsByTagName('html').item(0).scrollTop,
    preScrollBody = document.getElementsByTagName('body').item(0).scrollTop;

$j(window).scroll(function(){
   var scrolledHtml = document.getElementsByTagName('html').item(0).scrollTop,
       scrolledBody = document.getElementsByTagName('body').item(0).scrollTop;

   var scrolledVal = scrolledHtml != preScrollHtml ? scrolledHtml : scrolledBody;

   if(scrolledVal < -MenuOffsetY && scrolledVal >-1400 ) {}

   // here all your logic is

   // just before end of the handler reset values of these
   preScrollHtml = scrolledHtml;
   preScrollBody = scrolledBody;
}

等等