I am extremely new to Javascript and am having trouble with an element that appears as a user scrolls down the page, but I would like it to also come visible if they mouse over the area while at the top of the page.

Here's my current code for the scroll:
Code:
// Show the hidden header
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 2) {
        $("#bar").addClass("bar-holder");
        $("#nav-logo-small").removeClass("hidden");
	$("#breaking").addClass("hidden");
    } else {
        $("#bar").removeClass("bar-holder");
        $("#nav-logo-small").addClass("hidden");
	$("#breaking").removeClass("hidden");
    }

    if (scroll >= 250) {
        $(".hidden-nav").removeClass("hidden");
    } else {
        $(".hidden-nav").addClass("hidden");
    }
});
This works just fine, but I would also like to add a rule that would add the ".bar-holder" class to "#bar" and remove the ".hidden" class from ".hidden-nav" on mouseover and then hide again on mouseout. I've tried a few variations, but they always result in the content being hidden again if the user has already scrolled down the page. I want the mouseover rules to only apply when the user is at the very top of the page.

I know the scroll rule has to be done using "window" and I assume the mouseover rule has to be done using "document", but I'm at a loss as to how to combine the two.

Thanks for any help you can provide.