Question

我对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，最后绑定它们，但这些都没有似乎按照我的想法工作。

我想不出其他任何可以尝试的东西，所以我不确定这是不是我做错了，或者是否甚至不可能这样做。

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

Answer 1

试试这个

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

Answer 2

您没有考虑页面的滚动状态，因此无论页面是否滚动，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 Fiddle demo

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

Answer 3

在这里你只需添加变量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");
    });
});

Answer 4

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

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

您也可以尝试here。

希望能帮到你：）

mouseenter mouseleave不按照我认为应该的方式工作

4 个答案: