jquery：滚动条上的菜单消失再现悬停/ mouseover/out

Question

我试图在无尽的滚动页面底部有一个菜单。我有这里的要点FIDDLE当你滚动时，我想菜单消失，然后重新出现在悬停/鼠标悬停，鼠标移出功能。 。我似乎无法让它完美地工作。如果你玩弄它，你会注意到当你滚动时，然后将鼠标移动它会回来。但是如果你用鼠标仍然在该区域上滚动，它会滑落，然后向上，然后向下，然后向上等等。这似乎妨碍了代码并且走出怪物。在实际的wepage上，您必须重新加载才能使其再次运行。

任何人都可以提供一些协助吗？

感谢

HTML

 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    
     <div class = "width"></div><div id = "bar"></div> 

CSS

 .width { 
width:100%; 
height:60px; 
background-color:red; 
background-image: url('{image:Background}'); 
position:fixed; 
z-index:1; 
bottom:0px; 
text-align:center; 
font:12px helvetica; 
letter-spacing:2px; 
text-transform:lowercase; 
color:#0f0f0f; 
line-height:20px; 
} 
#bar { 
width:100%; 
height:60px; 
background-color:transparent; 
bottom:0px; 
position: fixed; 
} 

jQuery的

$(window).scroll(function() { 
    if ($(this).scrollTop() < 10) { 
     $(".width").stop(true, true).slideDown(); 
    } else { 
     $(".width").slideUp(); 
    } 
    $().ready(function() { 
     $("#bar", this).mouseover(function() { 
      $(".width").slideDown("slow"); 
     }); 
     $("#bar", this).mouseout(function() { 
      $(".width").slideUp("slow"); 
     }); 
    }); 
}); 

Answer 1

更改您的HTML这样的：

<div id="bar"> 
    <div class="width"> 
     · <a href="http://itsdoom.com" target="new" style="target-name: new; target-new: tab;">website</a> · <a href="/rss">rss</a> · 
     <div id="tituli"> 
      <a href="http://everycornerlurksdoom.tumblr.com">DOOM</a> 
     </div><!-- #tituli --> 
    </div><!-- .width --> 
</div><!-- #bar --> 

编辑**让我知道这是你追求的：

$(document).ready(function(){ 
    $('.width').slideDown(); 
    hovered = false; 
    $(window).scroll(function() { 
     if ($(window).scrollTop() >= 10 && hovered === false){ 
      $(".width").slideUp(); 
     } else if (hovered === true) { 
      $('.width').show(); 
     } else { 
      $('.width').slideDown(); 
     } 
    }); 
    $("#bar").mouseenter(function (e){ 
      if ($('.width').is(':visible') && hovered === false) { 
       e.preventDefault(); 
       hovered = true; 
      } else { 
       $(".width").slideDown("slow"); 
       hovered = true; 
      } 
    }); 

    $("#bar").mouseleave(function (e){ 
     if ($(window).scrollTop() >= 10) { 
      $(".width").slideUp("slow"); 
       hovered = false; 
     } else { 
      e.preventDefault(); 
      hovered = false; 
     } 
    }); 
}); 

这里是一个较新的-ER-ER小提琴：http://jsfiddle.net/4CdFP/28/

希望有所帮助。