Css Position Fixed. Div Wrapper Must Be Fixed Vertically But Must Be Varying In Horizontally

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 w

Solution 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):

<divid="simulated-html"><divid="footer"><span><!-- Footer text here --></span></div><divid="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;
}
#footerspan {
    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.

Solution 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.

Solution 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());
});

Solution 4:

how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:

#centered { 
          height: 350px;
          top: 0;  
          position: fixed;
          width: 1024px; 
          left: 50%; 
          margin-left: -512px; 
          z-index: 9999;
          }

notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.