Javascript jquery窗口滚动事件在overflow-x处于隐藏状态时无法正常工作

我使用这段代码向导航栏添加了一些动画

    $(window).on("scroll", function () {
    if ($(this).scrollTop() > 20) {
        $('.top-menu .navbar').removeClass('remove-nav-move');
        $('.top-menu .navbar').addClass('nav-move');
    } else {
        $('.top-menu .navbar').removeClass('nav-move');
        $('.top-menu .navbar').addClass('remove-nav-move');
    }
});

然后我添加了一些css

html , body  {
    overflow-x: hidden;
}

.full-width-bar {
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    background: rgba(0, 0, 0, 0.5);
}

---

和

溢出-x:hidden会破坏窗口滚动，因此请提供任何帮助来修复此问题或任何其他方法来解决此问题，并提前表示感谢
我没有找到任何解决方案，因此我删除了
overflow-x
，但在此之前我尝试过，最好的方法是

  var up_wind = 0;

$(window).bind("mousewheel DOMMouseScroll wheel", function (event, delta) {
     console.log(delta);
    if (delta>= 0 && delta != "undefined") {
        if(up_wind != 0){
            up_wind--;
            console.log('Scroll up');
            console.log(up_wind);
        }
    }
    else if(delta != "undefined") {
     if(up_wind >= 0)
         up_wind++;

         console.log('Scroll down');
        console.log(up_wind);
    }

    if(up_wind > 1){
        $('.top-menu .navbar').removeClass('remove-nav-move');
        $('.top-menu .navbar').addClass('nav-move');
    } else {
        $('.top-menu .navbar').removeClass('nav-move');
        $('.top-menu .navbar').addClass('remove-nav-move');
    }
});

希望会有所帮助