滚动时与其他元素重叠时隐藏菜单（div）答案

【问题标题】：Hide menu (div) when overlaps other elements while scrolling滚动时与其他元素重叠时隐藏菜单（div）
【发布时间】：2011-10-17 20:45:46
【问题描述】：

我在使用 jquery 时遇到了一点问题，并且 div 菜单没有正确隐藏！

我有一个单页站点，在用户向下滚动时，视口顶部有一个固定菜单，该菜单跟随窗口。所有的导航就像一个长的（取决于 div 高度）垂直滚动。

所有页面内容都在单独的 div 中，如下所示。

<!-- this is the menu-->
<ul id="jmenu" style="position:fixed; z-index:9999">
  <li>...</li>
  <li>...</li>
</ul>
<!-- this is the structure section-->
<div id="first">...</div>
<div id="second">...</div>
<div id="third">...</div>
<div id="fourth">...</div>

等等。

我使用这个 jquery 代码和库 jquery-overlap (https://github.com/brandonaaron/jquery-overlaps) 来隐藏菜单，如果它与一些文本重叠（在这种情况下是一些 h1 标签）

var over= false;
$(document).scroll((function() {
if($('#jmenu').overlaps("h1") && (over==false)){
    $('#jmenu').fadeOut("slow");
    over= true;
}else{
    $('#jmenu').fadeIn("slow");
    over= false;
}
}));

但是这有问题。如果我快速滚动所有页面并且菜单与许多不同的 h1 重叠，菜单开始闪烁。

谁能告诉我我做错了什么？？？

【问题讨论】：

标签： jquery menu overlay overlap

【解决方案1】：

应该这条线；

if($('#jmenu').overlaps("h1") && (over=true)){

是

if($('#jmenu').overlaps("h1") && (over=false)){

【讨论】：

【解决方案2】：

这里有一个错字：&& (over=true) 应该是 && (over==true) 或只是 && (over)

【讨论】：

【解决方案3】：

只是一个想法：

可能是淡入淡出的速度不如滚动快，所以它会变得混乱。您可以尝试使用 .stop(true, true).animate(/your properties here/) 而不是预先构建的淡入淡出功能。在 jquery 上查找 .stop()，这就是这里的关键。

我必须查看实际页面以确定更明确的答案。

【讨论】：

我试过了，效果是一样的。您可以检查 script.js 开头的 Jquery 行。链接在这里bit.ly/qicIa2