Fixed position in only one direction

Question

So, essentially, I'd like to have an item that is fixed to the the bottom of the page, but when the view scrolls horizontally, it should horizontally scroll too.

I can hack out a means of doing this with JavaScript, but is there any CSS way to do it? I don't mind a few extra DIVs here and there.

Isn't that what fixed positioning does? Or did you mean when you move horizontally, it should **not** horizontally scroll — Aishwar, Nov 14 '10 at 06:24
are you talking about floating footer , what about horizontal scrool , see if this question is useful http://stackoverflow.com/questions/146659/how-do-i-get-a-floating-footer-to-stick-to-the-bottom-of-the-viewport-in-ie-6 — kobe, Nov 14 '10 at 06:31
No. With fixed positioning, the maximum width of the `div` or w/e is the width of the browser window, as far as I can tell. — Aaron Yodaiken, Nov 14 '10 at 06:53
**CSS only solution**: http://stackoverflow.com/questions/10887834/css-position-fixed-div-wrapper-must-be-fixed-vertically-but-must-be-varying-in/ — doptrois, Jun 05 '12 at 08:04

score 15 · Accepted Answer · edited Sep 05 '12 at 13:30

15

CSS part:

#footer {
    position:fixed;
    bottom:0px;
    left:0px
}

jQuery part:

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

edited Sep 05 '12 at 13:30

Karmad

25
6

answered Nov 14 '10 at 06:20

Klaster_1 Нет войне

11,790
9
61
73

I don't think assigning a negative left value will do exactly what was asked. – Jorge Orpinel Pérez Mar 01 '15 at 04:35

score 2 · Answer 2 · answered Dec 20 '11 at 15:10

2

Really the jQuery part must be like:

var s = $(window).scrollLeft() - scroll_old;    
scroll_old = $(window).scrollLeft(); // initially = 0;
var diff = left_num - s;
var new_left = diff+"px";

then like above...

answered Dec 20 '11 at 15:10

Giovanni

62
3

Fixed position in only one direction

2 Answers2

Linked