Home/ Questions/Q 8186089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T02:04:29+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0