A div that is position:fixed while scrolling vertically but position:relative while scrolling horizontally?

Question

I'm trying to position a div element at the top of my website that has a position fixed while scrolling vertically, but have a relative position while scrolling horizontally. I don’t believe this is possible to achieve with CSS alone (maybe possible?). I assume I have to use some Javascript (JQuery) to force this div to stay at the top of the screen while still having a relative position while scrolling horizontally.

I’ve tried placing fixed div’s inside relative divs and many variations of positions using CSS without success. I’ve also tried detecting when the user scrolls and then forcing the div to the top of the page while the div is still relative, but cannot get the feature working properly. The feature needs maintain positions while scrolling horizontally and stay fixed at the top of the screen while scrolling vertically.

I have an fiddle example that shows what I’m working with and when scrolling vertically I get my desired results. However when scrolling horizontally the positions at the top of the page would be rendered useless. If you remove the ‘fixed’ css class you can see how horizontal scrolling should work and how the positions at the top of the page stay relative.

/** JQuery Scroll Attempt **/
$( document ).ready(function() {
    console.log( "ready!" );
    $(window).scroll(function () {
        console.log('scrolling..');
        $(".rel").css( {top: -$('.rel').scrollTop() });
    });
});

UPDATE(Solved):

OK I figured it out, this JQuery snippet worked for me, I'll update the fiddle as well.

// JQuery
$( document ).ready(function() {
    $(window).scroll(function () {
        var currPos = $(document).scrollLeft();
        $('.fixed').css('left', -currPos + 5 );
    });
});