title: jQuery - Recalculate variable on window resize and re-run function
body: <p>I wrote a function that hides and toggle a top bar div:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  
          $.fn.myTopBar = function() {
  
                  var sipPosTop = 0;
                  var topDivHeight = $("#top").outerHeight();
  
                  $('#top').css('top' , -topDivHeight+10).show().animate({top: '+=0'}, 2000);
  
  
                  $("#top-toggle").click(function(e) {
                      e.preventDefault();
                      $("#top").animate({ top: sipPosTop }, 200, 'linear', function() {
                          if(sipPosTop == 0) { sipPosTop = -topDivHeight+10; }
                          else { sipPosTop = 0; }
                      });
                  });
          };
  });
  </code></pre>
  
  <p>Works nice on page load, but on window resize the #top div height changes and it breaks the layout. How can I recalculate it and re-run the function on window resize? I tried the following:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $.fn.myTopBar();
  });
  
  jQuery(window).resize(function($){
      $.fn.myTopBar();
  });
  </code></pre>
  
  <p>But does not work. Thanks for any help</p>