Question

I am relatively new to jQuery, and I seem to be stuck with this mouseenter/mouseleave problem. I would like to setup a menu that “hides” when the page isn’t at the top, which seems to be working fine, when it’s hidden I would like to make it so when a user hovers over it the class switches and the menu comes back out. However, I don’t want this when it gets scrolled back to the top. It works fine when the page first loads (in firefox and chrome) and I haven’t scrolled yet, but after scrolling down and back to the top the menu will hide on mouseleave.

Here is a jsFiddle of my current code setup.

I’ve been trying to solve this for awhile now, and have tried a few other methods.

I tried just using hover like this

$("#access").hover(function() {
            $(this).removeClass("scroll").addClass("normal");
        }, function() {
            $(this).removeClass("normal").addClass("scroll");
        });

but that did the same thing as the code I have right now.

Some of the other methods I tried was to pass the b variable to another function, create a seperate div and track it’s position to determine whether or not to use the mouseenter/mouseleave, and finally to bind them, but none of this seemed to work as I thought it should.

I can’t think of anything else to try, so I am not sure if it’s something I’m doing wrong or if this isn’t even possible to accomplish like this.

This is my first question I tried to include as much information as I could think of hopefully it’s enough information.

Answer 1

Try this

$(document).ready(function() {
    $(window).scroll(function() {
        var b = $(window).scrollTop();
        $("#access").toggleClass("normal", b == 0)
        $("#access").toggleClass("scroll", b > 0)
    });
    $("#access").hover(function() {           
        if($(window).scrollTop() > 0){
            $("#access").toggleClass("normal scroll");
        }
    });
});​

http://jsfiddle.net/bJquD/6/