CODEWITHSUNDEEP
javascripthtmlcssheaderhorizontal-scrolling
Jack Guy
Jack Guy

Reputation: 8523

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)

Upvotes: 0

Views: 2888

Answers (2)

tuff
tuff

Reputation: 5153

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

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

Upvotes: 1

David Passmore
David Passmore

Reputation: 6099

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!

Upvotes: 1

Related Questions