javascript - 如果 hasClass 然后触发 mouseover mouseout

Question

当 div 具有类 sticky 时，我正在尝试将鼠标悬停或悬停功能添加到它。因此，当导航粘滞时，homepage-sidemenu 应该得到 display:none;。 .homepage-sidemenu.sticky 应该在鼠标悬停时可见，在鼠标移开时不可见。

我认为这就像添加一个悬停功能一样简单，但不知何故我遗漏了一些东西，因为它不符合我的要求。粘性类添加了滚动功能。

A fiddle here演示发生了什么

所以我有这个:

<div id="nav">
 <ul class="menu">
  <li class="highlight"><a href="">categories</a></li>
 </ul>
</div>

<div id="content">
 <div class="homepage-sidemenu">
  <ul>
   <li class="highlight">...</li>
  </ul>
 </div>
</div>  

var fixmeTop1 = $('#nav').offset().top;
var fixmeTop = $('.homepage-sidemenu').offset().top + 100;
$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop1) {
        $('#nav').addClass("sticky");
    } else {
        $('#nav').removeClass("sticky");
    }
    if (currentScroll >= fixmeTop) {
        $('.homepage-sidemenu').addClass("sticky");
    } else {
        $('.homepage-sidemenu').removeClass("sticky");
    }

});

$('#nav.sticky .menu li.highlight').mouseover(function () {
    if ($('.homepage-sidemenu').hasClass('sticky')) {
        $('.homepage-sidemenu.sticky').css('display', 'block');
    }
});

需要做的是，当主导航固定/向下滚动时，侧边菜单会消失。悬停类别链接时，它应该变得可见。

我尝试了各种功能(悬停、鼠标输入、单击等)来完成此操作，但没有成功。修复导航后，看起来好像缺少了什么。

有人能给我指出一些方向或告诉我我做错了什么吗？!

Answer 1

您需要使用事件委托(delegate)来附加您的鼠标悬停事件，或者只将该事件附加到#nav 而不是#nav.sticky。然后，您可以像使用主页侧边菜单一样在事件内部进行过滤。您正在尝试在 #nav 具有粘性类之前进行绑定(bind)，因此它不会起作用。