0

自分で解決できず、解決策が見つからない問題があります。Chrome と Firefox で動作する jQuery でスクリプトを作成しましたが、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 ステートメントでは、html の position.top 値をチェックして #bonmenu が上部に消えるかどうかをチェックします。ステートメントが true の場合、#bonmenu_info_container の css 位置の値は、相対から固定に、またはその逆に変更する必要があります。

Chrome/FF での動作を確認できます: http://bonappetea.com/menu

Chrome/FF $('html').position().top の値はスクロール中に変化しますが、IE では変化しません。なぜなのかご存知ですか？または、私よりも優れた解決策がありますか？

このコードをどうすればいいのかまったくわかりません。すべてをゼロから始めたくありません。

4

1 に答える 1

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;
}

等々

于 2012-08-16T23:32:56.130 に答える