jquery: menu disappear on scroll reappear hover/mouseover/out

Question

Im trying to have a menu across the bottom of an endless scrolling page. I have the gist of it here FIDDLE When you scroll I would like the menu to disappear and then reappear on a hover/mouseover,mouseout function. . I just can't seem to get it to work perfectly. If you play around with it you'll notice that when you scroll, then move the mouse over it it will come back. But if you scroll with the mouse still over the area it will slide down, then up, then down, then up etc. It seems to glitch the code and gets out of wack. On an actual wepage you have to reload it to get it to work again.

Can anyone offer some assistance with this?

thanks

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

Change your HTML to this:

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

EDIT** Let me know if this is what you're after:

$(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;
         }
     }); 
});

Here's a newer-er-er fiddle: http://jsfiddle.net/4CdFP/28/

Hope that helps.