Question

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

Answer 1

Should this line;

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

Be

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