jQuery .offset 从底部位置在滚动功能中不起作用？

Question

我在使用偏移量设置滚动函数上的 2 个位置时遇到问题。

我创建了一个 fiddle ，这样你就可以看到... http://jsfiddle.net/motocomdigital/SGCHt/12/

当您打开此 fiddle 时，将 fiddle 预览视口(viewport)缩小到与下面的屏幕截图类似的大小。

我的问题

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

黄色列代表选项卡容器，我尝试使用 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 文档中找到一些能让你的生活更轻松的东西，但一无所获。据说offset只支持top/left

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

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

我还包含了选项卡顶部的 jQuery css 定义。如果没有定义 onload，在第一次滚动之前会出现奇怪的文档高度变化。

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