0

I have a header that is set at a minimum width of 960px and is fixed to the top of the page. When the user shrinks the window to a size smaller than 960px, the horizontal scrollbar appears, as it should. However, when the user scrolls horizontally, since some of the header is cut off, I would like to be able to scroll the header at the same rate as the page... I pretty much want my header fixed vertically, but not horizontally.

I've looked at the following, but no help:

CSS: fixed position on x-axis but not y?

Centering a fixed element, but scroll it horizontally

Community
  • 1
  • 1
Andre C
  • 457
  • 1
  • 9
  • 26

1 Answers1

2

I know this is a dated question and am not sure if you figured it out yet, but wanted to submit an answer in case someone else has the same problem.

When you set content to fixed in CSS with a minimum width, it is locked relative to the window on both axes. When the window is resized to less than minimum width, the excess header/footer is clipped and cannot be scrolled to. Unfortunately, there is no way to change this behavior in CSS alone. There is, however a simple jQuery fix for your problem (assuming you already have other content on the page that will create the horizontal scroll bar):

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

This will cause the header and footer (as appropriate) to move on the x axis in the opposite direction of the scroll, thus achieving your desired effect.

newmanth
  • 408
  • 7
  • 18