Pozycja: ustalona na pozycję: statyczna, gdy pojawia się poziomy przewijanie? - php, javascript, jquery, html, css

Szukam sposobu, aby mój element div stał się statyczny podczas powiększania.

Spróbuj na przykład Facebooka. Powiększ, a kiedy zawartość „górnego paska” zajmuje więcej niż 100% ekranu, staje się statyczna i nie jest już naprawiona. Jak zrobić coś takiego?

Wydaje mi się, że zawartość "górnego paska" ma określoną szerokość, a kiedy powiększasz tak, że ekran jest mniejszy niż ta określona szerokość, pojawia się poziomy pasek przewijania, a element div "górnego paska staje się statyczny.

Podsumowując z kodem.

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

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

Gdy ekran staje się mniejszy niż 800 pikseli, górny pasek przestaje być position: fixed; i staje się position: static;

Jeśli coś jest niejasne, proszę o komentarz, a ja postaram się odpowiedzieć. Od dłuższego czasu próbuję znaleźć rozwiązanie. ;)

Preferowanym językiem poprawki jest: html, css, javascript, jquery lub php

Z góry dziękuję.

Odpowiedzi:

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

Będzie to działać w ten sposób przy użyciu zapytań o media css3:

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