悬停jQuery上的延迟

我正在做一个导航栏，当用户向下滚动时，它会改变图标（我通过改变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')
    });
  }
});

问题是，动画有一个“滞后”，或者在悬停完成后，它甚至不会更改回图标

有什么办法可以改变吗

---

谢谢您的帮助。

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

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

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

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;
}

---

在纯css中使用jsIn比在纯css中使用jsIn好吗？如果是这样的话，你如何根据反css中的滚动来改变背景（或任何东西）？我在回答中添加了一个关于如何使用css来实现这一点的描述。