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/

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

我还包括了tab top的jQuery css定义。在没有定义onload的情况下，在第一次滚动之前有一个奇怪的文档高度变化。

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