How to make position:fixed div scroll horizontally

Question

I have a div with position:fixed, as the image below suggests.

I want it to be fixed vertically, but I want it to scroll horizontally with the rest of the content (notice the horizontal scroll bar).

Is this possible with CSS? Or do I need Javascript (in this case, how could I do it)?

enter image description here

possible duplicate of CSS: fixed position on x-axis but not y? — kapa
– kapa, Commented Jan 18, 2012 at 15:32

Fewfre · Accepted Answer · 2012-06-11 14:42:52Z

6

Old question, but I was also looking for a solution also, and found a nice simple jquery solution, and figured someone else might find it helpful if nothing else:

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

with header being the div, and originalLeft being, well, the initial left:position. This also works if someone scrolls and then zooms out, such that it would go where you would want it to.

answered Jun 11, 2012 at 14:42

Fewfre

1,5194 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:30:21Z

3

You need javascript. Here you can read a tutorial (with mootools): http://www.rickyh.co.uk/css-position-x-and-position-y/. Here a similar question, solved with jquery: CSS: fixed position on x-axis but not y?

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jan 18, 2012 at 15:15

Alessandro Pezzato

8,8825 gold badges47 silver badges63 bronze badges

Comments

Dhaval Shukla · Accepted Answer · 2012-01-18 15:23:53Z

1

you can do it by css itself:

<div style="width:250px; height:250px; border:solid;overflow:scroll; overflow-y:hidden">
    <div style="width:500px; height:500px; border:solid;"></div>
</div>

answered Jan 18, 2012 at 15:23

Dhaval Shukla

1,1272 gold badges10 silver badges20 bronze badges

1 Comment

John Assymptoth Over a year ago

The problem with this solution is that the scroll bar appears right next to the div... I would want the scroll bar to appear in the bottom of the browser.

Collectives™ on Stack Overflow

How to make position:fixed div scroll horizontally

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related