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


Tags: php,javascript,jquery,html,css

Problem :

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.



Solution :

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

    CSS Howto..

    Text-only CSS slideshow

    How to add objects in a DIV and appear above the DIV

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to create a fixed div inside an another div?

    How to make custom css fonts render exactly like designs

    How to get a list of css attributes of an element with jquery

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to set css via jquery for preventing some action

    How can I show a element on my site when hovered with only JS?

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    How to put things in divs with true border

    How to center this stuff inside a link using CSS?

    How to vertically center links in a menu?

    How to embed a custom bitmap font into website using CSS

    How can I make 3 circles with a different radius “stick” together? (with example image)

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    How to grows up a div height with a table that has your rows added dynamically?

    How to set CSS rules for input, except one type

    How to override the default css class using c#

    How to move CSS classes to the right html elements

    How to programmatically download all contents of webpage, not only the source code in Java

    How to fit the content of the site in any resolution CSS

    How to properly separate pages in jQuery Mobile?

    How to display separate paragraphs in the same area using CSS HTML

    How do I take multiple CSS files with the exact same selectors and force one to be used only on a specific div?

    html-css-how to make opeanable vertical menu [closed]

    How to add custom fonts [duplicate]

    How to create spaces between elements in HTML/CSS

    How can I prevent the seconds portion from displaying on the HTML5 time input element?

    How to find CSS deceleration for :hover state using Chrome's inspector