Fixed position - horizontal scrolling

I have a left vertical sidebar, when the user scrolls vertically, the sidebar scrolls vertically with the user. However, when the user scrolls horizontally, if the window is too small, the vertical side panel slides along with the window. How to stop the sidebar from scrolling horizontally, but also allow the sidebar to scroll vertically with the user.

And I do not want to do this.

overflow: hidden;

since I want the user to be able to scroll horizontally, but I just don’t want the sidebar to appear along with them.

this is my javascript:

$(document).ready(function(){
    var top = $("#sidebar").offset().top;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y >= top) {
            $("#sidebar").addClass('fixed');
        } else {
            $("#sidebar").removeClass('fixed');
        }
    });
});

and my css:

#sidebar {
    position: absolute;
    height: 100%;
    min-width: 100px;
    width: 100px;
    overflow: hidden;
    background-color: #ededed;
    border-right: 1px solid #aaa
    }
#sidebar.fixed {
    position: fixed;
    height:100%;
    top: 0%;
    z-index: 1;
}