时间戳

首页 > 解决方案 > 如果在滚动后将鼠标悬停在主侧边栏上，请保持打开状态

jquery - 如果在滚动后将鼠标悬停在主侧边栏上，请保持打开状态

问题描述

在滚动时，我想打开“.main-sidebar”，当滚动停止时，它应该关闭“.main-sidebar”。但是如果鼠标在“.main-sidebar”上，那么它需要保持打开状态。

.sidebar-collapse 是 body 上的一个类，用于折叠或展开主侧边栏。

我已经有一段时间了，我想我需要另一双眼睛来发现我的错误。

// check if the menu is collapsed or not

$('body').on('mousemove', function() {

    var scrollTimer;

    if ($(this).hasClass("sidebar-collapse")) {

        console.log('Check: Menu is collapsed');

        //Scrolling opens menu
        $(window).scroll(function() {
            // detect scrolling and add/remove classes
            var scroll = $(window).scrollTop();
            if (scroll) {
                $("body").addClass("sidebar-collapse");
            } else {
                $("body").removeClass("sidebar-collapse");
            }
            // set and start timer counting for 8 sec
            scrollTimer = setInterval(function() {
                //When time is up addClass back
                $("body").addClass("sidebar-collapse");
            }, 5000);
        });
    } else {

        console.log('Check: Menu Open (missing: .sidebar-collapse)');

        //Stay open if mouse is on menu
        $('.main-sidebar').on('mouseenter', function() {
            if (!$('body').hasClass("sidebar-collapse")) {
                console.log('ON MENU');
                // set and start timer counting for 5 sec
                clearInterval(scrollTimer);
            }
        });
    }
});

标签： jquery

解决方案

如何在窗口滚动时向侧边栏添加/删除类，并且可以使用 css 处理侧边栏上的悬停：

$(window).scroll(function() {
  $('.main-sidebar').addClass("hide", ($(window).scrollTop() > 100));
  setTimeout(function() {
    $('.main-sidebar').removeClass('hide');
  }, 1000);
});

https://jsfiddle.net/jxml0aer/1/

推荐阅读