title: Get and set top position
body: <p>I am using <code>hammer.js</code> to make a basic touch friendly mobile site. I have hidden the top menu with a negative top position and it will appear using css3 transitions upon a double tap. However I want it to then hide again upon a second double tap.</p>
  
  <p>I have tried using <code>if/else</code> to call the top position then re-set it accordingly but I cant get it to work, anyone know where I am going wrong?</p>
  
  <pre><code>var t = $("#topbar");
  var position = t.position();
  
  $sw.on('doubletap', function(event) {
      event.preventDefault();
      if (position.top == '-55px') {
          $('#topbar').css("top", "0");
      }
      else {
          $('#topbar').css("top", "-55px")
      }
  });
  </code></pre>
  
  <p>The site address is <a href="http://www.bettondesignwork.co.uk/tim/mobile" rel="nofollow">http://www.bettondesignwork.co.uk/tim/mobile</a></p>
  
  <p>Thanks</p>