滚动时与其他元素重叠时隐藏菜单 (div)
我有一个 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，菜单就会开始闪烁。
有人可以告诉我我做错了什么吗？？？
I have a little problem with jquery and a div menu that is not hiding correctly!
I have a one-page site, with a fixed menu at the top of the viewport that follows the window while the user is scrolling down. All the navigation is like an long (depending on the div height) vertical sroll.
All the page contents are in separate divs like below.
<!-- 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>
and so on.
I use this jquery code and the library jquery-overlap (https://github.com/brandonaaron/jquery-overlaps) to hide the menu if it's overlapping some text (in this case some h1 tags)
var over= false;
$(document).scroll((function() {
if($('#jmenu').overlaps("h1") && (over==false)){
$('#jmenu').fadeOut("slow");
over= true;
}else{
$('#jmenu').fadeIn("slow");
over= false;
}
}));
But there's something wrong about this.The menu begins to blink if I scroll quickly all the page and the menu overlaps many different h1.
Can someone tell me what I'm doing wrong???
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
应该这条线；
是
Should this line;
Be
您这里有一个拼写错误：
&& (over=true)应该是&& (over==true)或只是&& （结束）You have a typo here:
&& (over=true)should be&& (over==true)or just&& (over)只是一个想法：
可能是淡入淡出的速度没有滚动快，所以它会变得混乱。您可以尝试使用 .stop(true, true).animate(/这里是您的属性/) 而不是预构建的淡入淡出函数。在jquery上查找.stop()，这是这里的关键。
我必须查看正在运行的页面才能确定更明确的答案。
Just a thought:
It might be that the fading isn't happening as fast as the scrolling, so it gets confused. You could try using .stop(true, true).animate(/your properties here/) instead of the prebuilt fade function. Look up .stop() on jquery, that's the key here.
I would have to see the page in action to determine a more definitive answer.