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.

enter image description here

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

+1 nice explanation of the problem

Manse
– Manse

2012-07-02 13:47:33 +00:00
Commented Jul 2, 2012 at 13:47 — Manse
– Manse, Commented Jul 2, 2012 at 13:47

r0m4n · Accepted Answer · 2012-07-02 17:36:30Z

8

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/

answered Jul 2, 2012 at 17:36

r0m4n

3,5023 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshc Over a year ago

Thanks dude this worked a beaut. I can't think why there was a change in height on ready :/ Managed to apply your method in my project by having an extra conditional inside the first one, and I already had a $tabs variable on my script so all slotted in nice. Appreciate your time on this. Josh

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related