CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally

Question

I have a div , something like this

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.

I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?

Fixed position in only one direction I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks

Answer 1

Seems to be impossible to get this "look fine" with only CSS/HTML. As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.

Fortunately, i found a way to get it work somehow (not that beautiful): http://jsfiddle.net/MKEbW/5/

HTML (inside the body-tag):

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS:

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

​ Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.

Tested with scrollbars, smaller and wider viewports in Chrome 18.

I recommend a fallback for not capable browsers and/or a JS workaround.

Answer 2

The linked post is exactly what you need. You can copy the exact script.

$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});

The div css is like this (probably not footer when it has top 0px :P but ok)

#footer
{  position:fixed;
   left:40px;
   top:0px; 
}

When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.

Answer 3

There is a small fix on the previous code.

The changed javascript code for moving fixed div horizontally

$(window).scroll(function(){
  $('#footer').css('left',-$(window).scrollLeft());
});