0

我对 jQuery 比较陌生，我似乎被这个 mouseenter/mouseleave 问题困住了。我想设置一个菜单，当页面不在顶部时“隐藏”，这似乎工作正常，当它被隐藏时我想这样做，所以当用户将鼠标悬停在它上面时，类切换和菜单回来了。但是，当它滚动回顶部时，我不希望这样。当页面第一次加载（在 Firefox 和 chrome 中）并且我还没有滚动时，它工作正常，但是在向下滚动并返回顶部后，菜单将隐藏在 mouseleave 上。

这是我当前代码设置的jsFiddle。

我一直在尝试解决这个问题，并尝试了其他一些方法。

我试过像这样使用悬停

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

但这与我现在拥有的代码相同。

我尝试的其他一些方法是将 b 变量传递给另一个函数，创建一个单独的 div 并跟踪它的位置以确定是否使用 mouseenter/mouseleave，最后绑定它们，但这似乎都不起作用正如我认为的那样。

我想不出还有什么可以尝试的，所以我不确定这是否是我做错了，或者这是否甚至不可能像这样完成。

这是我的第一个问题，我试图包含尽可能多的信息，希望它是足够的信息。

4

4 回答 4

2

试试这个

$(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/

于 2012-08-08T23:03:17.810 回答
0

您没有考虑页面的滚动状态，因此无论页面是否滚动，mouseenter/mouseleave 事件都会重置类名而不考虑。可以预见的是，这与您想要的并不相符。

对此的明显解决方案是使用全局变量（尽管在 jQuery 文档就绪的范围内）来跟踪它，然后在hover()函数中检查它，导致以下结果：

var scrolled = false;

$(window).scroll(
    function(){
        var b = $(window).scrollTop();
        if (b == 0) {
            $('#access').removeClass('scroll').addClass('normal');
            scrolled = false;
        }
        else if (b > 0) {
            $('#access').removeClass('normal').addClass('scroll');
            scrolled = true;
        }
    });

$('#access').hover(
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'scroll'
            $('#access').removeClass('scroll').addClass('normal');
        }
    },
    function(){
        if (scrolled) {
            // window scrolled, hence access class should be 'normal' (from mouseenter)
            $('#access').removeClass('normal').addClass('scroll');
        }
    });​

JS 小提琴演示。

这样做的结果是，如果页面未滚动，mouseenter/mouseleave事件什么也不做（因为它们不应该，normal在这种情况下类名是正确的），而如果页面被滚动，它们会删除滚动类名打开mouseenter并恢复它mouseleave。

于 2012-08-08T22:46:37.980 回答
0

在这里，您只需添加变量 isOnTop，mouseenter 和 mouseleave 处理程序在执行任何操作之前都会对其进行检查 

$(document).ready(function() {
var isOnTop=1;
    $(window).scroll(function() {
        var b = $(window).scrollTop();

        if (b > 0) {
            isOnTop=0;            
            $("#access").removeClass("normal").addClass("scroll");
        }

        else if (b == 0) {
            isOnTop=1;
            $("#access").removeClass("scroll").addClass("normal");
        }

    });

    $("#access").mouseenter(function() {
        if(isOnTop){return;}
        $(this).removeClass("scroll").addClass("normal");
    });

    $("#access").mouseleave(function() {
        if(isOnTop){return;}
        $(this).removeClass("normal").addClass("scroll");
    });
});​
于 2012-08-08T22:46:55.087 回答
0

是的，您正在向该元素添加一堆事件处理程序，这最终会令人难以置信地减慢页面速度。你想避免这样做。或者，您可以绑定事件，然后在滚动到页面顶部时将其删除。最好的方法是使用下面的代码。

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
            $("#access").removeClass("normal").addClass("scroll").on('mouseenter', function() {
                $(this).removeClass("scroll").addClass("normal");
            }).on('mouseleave', function() {
                $(this).removeClass("normal").addClass("scroll");
            });
        } else {
            $("#access").removeClass("scroll").addClass("normal").off('mouseenter mouseleave');
        }
    });
});​

您也可以在这里试一试。

希望这可以帮助你:)

于 2012-08-08T22:53:00.860 回答