Instead of .resize?

Question

I have this jQuery code:

  $(window).resize(function() {         
if ($(window).width() <= 1250) {
  $('#topbar').css('position', 'static');
} else {
  $('#topbar').css('position', 'fixed');
}
});

Problem is, when you have zoomed in lesser than 1250 and then reload the page this jQuery doesn't work. So how do i fix this?

Answer 1

Do this in CSS:

#topbar {
    position: static
}

@media screen and (min-width: 1250px) {
    #topbar {
        position: fixed
    }
}

Live demo: http://jsfiddle.net/krrvA/show/ (I'm using background colors to indicate the toggle. Resize the window horizontally and the color will change at 1250px.)

Answer 2

Try to trigger resize handler maybe:

$(window).resize(function () {
    if ($(this).width() <= 1250) {
        $('#topbar').css('position', 'static');
    } else {
        $('#topbar').css('position', 'fixed');
    }
}).triggerHandler('resize');