Question

I have a left vertical side bar that when the user scrolls vertically, the side bar scrolls vertically with the user. However when the user scrolls horizontally if the window is too small, the vertical side bar slides along with the window. How do i stop the side bar from scrolling horizontally but also allowing the side bar to scroll with the user vertically.

And I do not want to do this.

overflow: hidden;

as i want the user to have the ability to scroll horizontally but i just dont want the side bar to come 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 is:

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

Answer 1

Then fixed is maybe the wrong appoach.

theoretically you could use the .scroll feature to update the elements absolute top position, if the top changes, but ignore the scroll event when the left property changes.

Please look at this small and very simple example. http://jsfiddle.net/Hbkdt/

Notice: You can combine this with an animate feature, and debounce the window event, so that it does only fire every 30-50 milliseconds and then updates the values.

Animated and debounced example: http://jsfiddle.net/Hbkdt/1/