jQuery .offset from the bottom position not working in a scroll function?
<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="nofollow">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="http://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>
