jquery - 滞后悬停 jQuery

Question

我正在做一个导航栏，当用户向下滚动时改变它的图标(我通过改变 div 的背景来做到这一点)以同样的方式，只要用户将鼠标悬停在图标上，div 的背景就必须改变，这是我目前的代码:

App.js

$(document).scroll(function () {
  scroll_pos = $(this).scrollTop();
  var h = $("#secOne").height() - ($("#secOne").height() / 10);
  if (scroll_pos > h) {
    $("#topBar").css({
      'padding': '2.5vh 7.5vw 1vh 7.5vw',
    });
    $("#menuIcon").css({
      'background': 'url("assets/menuBlue.svg") no-repeat',
    });
    $("#menuIcon").hover(function () {
      $(this).css('background', 'url("assets/menuBlueHover.svg") no-repeat')
    });
  } else {
    $("#topBar").css({
      'padding': '5vh 7.5vw 2vh 7.5vw',
    });
    $("#menuIcon").css({
      'background': 'url("assets/menu.svg") no-repeat',
    });
    $("#menuIcon").hover(function () {
      $(this).css('background', 'url("assets/menuHover.svg") no-repeat')
    });
  }
});

问题是动画有“滞后”，或者在悬停完成后甚至没有变回图标。

有什么想法可以改变吗？

感谢您的帮助。

Answer 1

您遇到问题是因为每次调用“滚动”事件时您都在应用新的“悬停”事件。在向下滚动页面的过程中会调用多达数百个滚动事件，因此当您悬停时会调用多达数百个悬停事件。结果基本上是随机的，而且效率越来越低。

既然你问的是关于你当前代码的问题，我将从一个直接的答案开始，解决 jQuery/Javascript 逻辑问题。然后我会建议一个“纯”CSS 解决方案。

使用 jQuery 修复(次优)

尝试在“滚动”事件处理程序之外的变量中捕获滚动位置。然后也将您的“悬停”事件处理程序移到滚动功能之外。然后，您可以使用该滚动位置变量在“悬停”函数内部运行条件，在每次触发“悬停”事件时更新行为。

var scrolledPastH = false;

$(document).scroll(function () {
    scroll_pos = $(this).scrollTop();
    var h = $("#secOne").height() - ($("#secOne").height() / 10);
    scrolledPastH = scroll_pos > h;

    if (scrolledPastH) {
        $("#topBar").css({
            'padding': '2.5vh 7.5vw 1vh 7.5vw',
        });
        $("#menuIcon").css({
            'background': 'url("assets/menuBlue.svg") no-repeat',
        });
    } else {
        $("#topBar").css({
            'padding': '5vh 7.5vw 2vh 7.5vw',
        });
        $("#menuIcon").css({
            'background': 'url("assets/menu.svg") no-repeat',
        });
    }
});

$("#menuIcon").hover(function () {

    // This is the "handlerIn" function, passed as the first argument to .hover
    var background = scrolledPastH ? 'menuBlueHover.svg' : 'menuHover.svg';
    $(this).css('background', 'url("assets/' + background + '") no-repeat');

}, function () {

    // This is the "handlerOut" function, passed as the second argument to .hover
    var backgroundImg = scrolledPastH ? 'menuBlue.svg' : 'menu.svg';
    $(this).css('background', 'url("assets/' + backgroundImg + '") no-repeat');

});

使用“纯”CSS 修复(理想)

从上面可以看出，与简单的 UI 处理相比，使用 jQuery/Javascript 操纵外观可能需要一些复杂的代码。 “纯”CSS 让您忘记经常管理状态。

Javascript/jQuery

$(document).scroll(function () {
    scroll_pos = $(this).scrollTop();
    var h = $("#secOne").height() - ($("#secOne").height() / 10);
    if (scroll_pos > h) {
        $("#topBar").addClass('scrolledPastH');
        $("#menuIcon").addClass('scrolledPastH');
    } else {
        $("#topBar").removeClass('scrolledPastH');
        $("#menuIcon").removeClass('scrolledPastH');
    }
});

CSS

#topBar {
    padding: 5vh 7.5vw 2vh 7.5vw;
}

#menuIcon {
    background: url("assets/menu.svg") no-repeat;
}

#menuIcon:hover {
    background: url("assets/menuHover.svg") no-repeat;
}

#topBar.scrolledPastH {
    padding: 2.5vh 7.5vw 1vh 7.5vw;
}

#menuIcon.scrolledPastH {
    background: url("assets/menuBlue.svg") no-repeat;
}

#menuIcon.scrolledPastH:hover {
    background: url("assets/menuBlueHover.svg") no-repeat;
}