Question

I’m working on a site where I have to use a fixed DIV for the menu.
http://www.atelier2architecten.nl/index2.php

I’m trying to find a way to let the fixed div scroll horizontal.
Because, when je make your browser window smaller you can’t click the buttons that are outside te window.

I found some jquery solution. But those include animation. My client doesn’t want that. it has to stay fixed.

I also found a great solution on this site But it doens’t work when i use a DOC TYPE in my code. ( I need that for my CSS )

This is the code that doens’t work with any DOC TYPE:

function hscrollbar() {

var left = 
    /* window.pageXOffset should work for most recent browsers: */
    window.pageXOffset ? window.pageXOffset : 
    /* If it DOESN'T, let's try this: */
    document.documentElement.scrollLeft ? document.documentElement.scrollLeft : 
    /* And if THAT didn't work: */
    document.body.scrollLeft;
/* Now that we have the horizontal scroll position, set #footpanel's left 
   position to NEGATIVE the value, so it APPEARS to follow the scroll: */
document.getElementById('menu').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */

I hope someone can help me with this. When i don’t use a DOC TYPE it works perfectly on google chrome. But IE, as always, is the problem.

Greeting Tobias

Answer 1

Have you tried this:

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

Tested in FF and Chrome.

P.S. Needs jQuery