我有一个我自己无法解决的问题,我也找不到解决方案。我在 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 中则不会。你知道为什么吗?或者你有比我更好的解决方案吗?
我完全不知道如何处理这段代码,我不想从零开始。