Make a fixed div stay fixed horizontally

Question

Here is code that fixes a div to the top of the screen when the user scrolls to it.

However, on my browsers, if the user scrolls left or right, the bar stays fixed to the top but scrolls along. I wanted the bar to stay put, with the content it's over.

Here is the jfidddle

Here is the code:

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyalias').css('display', 'block');
            } else {
                    $('#stickyheader').css({position: 'static', top: '0px'});
                    $('#stickyalias').css('display', 'none');
            }
    });
});

Answer 1

The key part is left:-$(window).scrollLeft()

DEMO

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px',
                left: -$(window).scrollLeft()
            });
            $('#stickyalias').css('display', 'block');
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#stickyalias').css('display', 'none');
        }
    });
});