title: jQuery .offset from the bottom position not working in a scroll function?
body: <p>I'm having trouble setting 2 positions on a scroll function using offset.</p>
  
  <p>I have created a fiddle so you can see... <a href="http://jsfiddle.net/motocomdigital/SGCHt/12/" rel="noreferrer">http://jsfiddle.net/motocomdigital/SGCHt/12/</a></p>
  
  <p>When you open this fiddle, reduce the fiddle preview viewport down to the similar size of the screenshot below.</p>
  
  <p><img src="https://i.stack.imgur.com/30tsc.png" alt="enter image description here"></p>
  
  <p><strong>MY PROBLEM</strong></p>
  
  <p>You can see I'm using conditional statements to control the positioning of the blue tabs, depending on what scroll point they are at.</p>
  
  <p>The yellow columns represent the tab containers, and I'm tyring to use a <code>if else</code> statement to control the bottom positioning so the blue tabs never go outside the yellow containers.</p>
  
  <p>But I can't get this to work. My bottom positon offset does not work.</p>
  
  <pre><code>var $tab = $('.tab-button');
  
  $(window).bind("resize.browsersize", function() {
  
      var windowHalf = $(window).height() / 2,
          content    = $("#content"),
          pos        = content.offset();
  
  
      $(window).scroll(function(){
  
          if ($(window).scrollTop() &gt;= pos.top + windowHalf ){
  
              $tab.removeAttr('style').css({ position:'fixed', top:'50%'});
  
          } else if ($(window).scrollTop() &gt;= pos.bottom + windowHalf ){
  
              $tab.removeAttr('style').css({ position:'absolute', bottom:'0px'});
  
          } else {
  
              $tab.removeAttr('style').css({ top: $(window).height() + 'px' });
  
          }
  
      });  
  
  }).trigger("resize.browsersize");
  </code></pre>
  
  <p>​</p>
  
  <p>Can anyone please help me understand where I'm going wrong.</p>
  
  <p>Thanks
  Josh</p>