jQuery .offset from the bottom position not working in a scroll function?

Question

I'm having trouble setting 2 positions on a scroll function using offset.

I have created a fiddle so you can see... http://jsfiddle.net/motocomdigital/SGCHt/12/

When you open this fiddle, reduce the fiddle preview viewport down to the similar size of the screenshot below.

MY PROBLEM

You can see I'm using conditional statements to control the positioning of the blue tabs, depending on what scroll point they are at.

The yellow columns represent the tab containers, and I'm tyring to use a if else statement to control the bottom positioning so the blue tabs never go outside the yellow containers.

But I can't get this to work. My bottom positon offset does not work.

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() >= pos.top + windowHalf ){

            $tab.removeAttr('style').css({ position:'fixed', top:'50%'});

        } else if ($(window).scrollTop() >= pos.bottom + windowHalf ){

            $tab.removeAttr('style').css({ position:'absolute', bottom:'0px'});

        } else {

            $tab.removeAttr('style').css({ top: $(window).height() + 'px' });

        }

    });  

}).trigger("resize.browsersize");

​

Can anyone please help me understand where I'm going wrong.

Thanks Josh

Answer 1

So it appears you must calculate the bottom offset of an element manually. I tried to find something to make your life easier in the jQuery documentation but turned up with nothing. Supposedly offset only supports top/left

http://api.jquery.com/offset/

If we find the height of the wrapper, subtract the height of the tabs, we can figure out exactly where to limit the tab scroll.

Also I included a jQuery css definition of the tab top. Without defining it onload, there was a weird document height change before the first scroll.

http://jsfiddle.net/SGCHt/16/