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消失在窗口的顶部。这就是为什么在1st，如果statemant我通过检查html的position.top值检查#bonmenu是否在顶部消失。当语句为真时，#bonmenu_info_container的css位置值应该从相对变为固定，反之亦然。

您可以在Chrome / FF上查看其工作原理：http://bonappetea.com/menu

我在Chrome / FF $（'html'）中的位置。位置（）。顶部的值在滚动时会发生变化而在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;
}

等等

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

1 个答案: