Fix header to top of page with horizontal scroll

问题

I have a navigation header at the top of every page. I'd like the user to be able to scroll the horizontal overflow with a scrollbar. I understand this isn't possible with just CSS, but can any help me with the JavaScript portion?

If this is too general, I'll post my project's code, but it's pretty extensive.

Ex:

| Example Header | About | Contact | Bl | (Cut off)

<------------------> (Scroll bar)

回答1:

You can use a version of my code:

function reposition(){
    var el = document.getElementById('header');
    var ScrollLeft = document.body.scrollLeft;
    if (ScrollLeft == 0)
    {
        if (window.pageXOffset)
            ScrollLeft = window.pageXOffset;
        else
            ScrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
    }
    el.style.left = "-" + ScrollLeft + "px";
}

Replace 'header' with your header's id.

Hope this helps!

回答2:

It's possible with CSS. Set your header to use overflow: auto;.

Example: http://jsbin.com/edopor/4/edit

来源：https://stackoverflow.com/questions/12291226/fix-header-to-top-of-page-with-horizontal-scroll