Position: fixed to position:static when horizontal scroll shows up?

Question

Im looking for a way to make my div become static when you zoom in.

Try facebook for an example. Zoom in, and when the "topbar" content is more then 100% of the screen it becomes static and is no longer fixed. How do i make something like that?

I guess the "topbar" content is a specific width, and when you zoom so the screen is less than that specific width the horizontal scroolbar shows up and the "topbar" div becomes static.

To sum up with some code.

#topbar {
width: 100%;
height: 40px;
position: fixed;
}

#topbar-content {
width: 800px;
height: 40px;
}

When screen becomes less the 800px, topbar stops being position: fixed; and becomes position: static;

If something is unclear, please comment and i will try to answer. Been trying with a solution for a long time now. ;)

Preferable language for the fix is: html, css, javascript, jquery or php

Thanks in advance.

Answer 1

$(window).resize(function() {         
    if ($(window).width() <= 800) {  // check width when window get's resized
      $('#topbar').css('position', 'static');
    } else {
      $('#topbar').css('position', 'fixed');
    }
});

Answer 2

It will work like this using css3 media queries:

/* Place this after your css rules you show at your question */
@media screen and (min-width: 800px){
    #topbar {
        position: static;
    }
}