jQuery .offset从底部位置不能在滚动函数中工作？

Question

我在使用偏移量在滚动功能上设置2个位置时遇到问题.

我创造了一个小提琴,所以你可以看到...... http://jsfiddle.net/motocomdigital/SGCHt/12/

打开此小提琴时,将小提琴预览视口缩小到与下面屏幕截图相似的大小.

我的问题

您可以看到我正在使用条件语句来控制蓝色选项卡的位置,具体取决于它们所处的滚动点.

黄色列表示选项卡容器,我正在使用if else语句来控制底部定位,因此蓝色选项卡永远不会出现在黄色容器之外.

但我不能让这个工作.我的底部位置偏移不起作用.

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");

​

谁能帮助我了解我哪里出错了.

谢谢乔希

Answer 1

因此,您似乎必须手动计算元素的底部偏移量.我试图在jQuery文档中找到一些让你的生活变得更轻松的东西,但却什么也没找到.据推测,偏移仅支持上/下

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

如果我们找到包装器的高度,减去选项卡的高度,我们就可以确切地确定限制选项卡滚动的位置.

我还包括了选项卡顶部的jQuery css定义.没有定义onload,在第一次滚动之前有一个奇怪的文档高度变化.

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