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

score 6 · Accepted Answer · edited May 23 '17 at 10:31

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.

Is the JS fiddle working? I don't quite know what I'm looking for, but I'm not seeing any orange background, for example, nor the footer text. Would you mind including an explanation of how this is supposed to work? — JohnK, Jun 05 '20 at 23:04

score 1 · Answer 2 · answered Jun 04 '12 at 20:38

1

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.

answered Jun 04 '12 at 20:38

Ruben-J

2,663
15
33

Everyone who reads this please note, it does work, however you must have jQuery linked in your `.html` file for it to function. – spectre-d Jun 09 '16 at 14:55

score 1 · Answer 3 · answered Oct 18 '12 at 15:59

1

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

answered Oct 18 '12 at 15:59

Vimalkumar Kalimuthu

611
6
10

Everyone who reads this please note, it does work, however you must have jQuery linked in your `.html` file for it to function. – spectre-d Jun 09 '16 at 14:55

score 0 · Answer 4 · answered Jun 04 '12 at 20:34

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.

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

4 Answers4

Linked