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/

希望有所幫助。