Question

I have a problem i can’t solve by myself and which I coudn’t find a solution for.
I wrote a script in jQuery which works with Chrome and Firefox, but it doesn’t work with IE (even the newest one).

At a glance HTML looks like this::

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

a jQuery script like this: (‘$j’ is used instead of ‘$’)

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

Explanation how it should work:

I don’t want #bonmenu_info_container disappear in the top of a the window while scrolling the page. That’s why in 1st if statemant I check if #bonmenu disappear in the top by checking html’s position.top value. When the statement is true, css position value of #bonmenu_info_container should change from relative to fixed and vice versa.

You can see how it works on Chrome/FF: http://bonappetea.com/menu

What i nocited in Chrome/FF $(‘html’).position().top’s value changes while scrolling and in IE it doesn’t. Do you know why? Or do you have better solution than mine?

I have totally no idea what to do with this code and i don’t want to start it all from zero.

Answer 1

Yes it doesn’t. But body‘s position changes, so you need to check what changed and take an action accordingly.

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

and so on