JQuery.offset from bottom position not working in scroll function?

Question

I'm having trouble setting two positions in a scroll function using offset.

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

When you open this script, reduce the script viewport to the same size as the screenshot below.

MY PROBLEM

You can see that I use conditional operators to control the positioning of the blue tabs, depending on where they scroll to.

The yellow columns are tab containers, and I use the if else command to control the bottom position, so the blue tabs never go beyond the yellow containers.

But I can't get this to work. My lower positional 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 someone help me figure out where I am going wrong.

Thanks josh

Answer 1

So, you have to calculate the bottom offset of the element manually. I tried to find something to make your life easier in jQuery documentation, but didn't understand anything. Presumably 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 determine exactly where you can limit the scroll of the tab.

I also included a jQuery css definition at the top of the tab. Without detecting its loading, a strange modification of the document height occurred before the first scrolling.

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