Question

我的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重叠，菜单就会开始闪烁。

有人能告诉我我做错了什么吗？

Answer 1

应该这一行;

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

要

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

Answer 2

此处有拼写错误：&& (over=true)应为&& (over==true)或&& (over)

Answer 3

只是一个想法：

可能是褪色没有像滚动一样快，所以它会混淆。你可以尝试使用.stop（true，true）.animate（/ 你的属性 /）而不是预建的淡入淡出函数。在jquery上查找.stop（），这是关键所在。

我必须看到正在运行的页面，以确定更明确的答案。

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

3 个答案: