7

我在使用偏移量的滚动功能上设置 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");

​</p>

谁能帮我理解我哪里出错了。

谢谢乔什

4

1 回答 1

8

因此，您似乎必须手动计算元素的底部偏移量。我试图在 jQuery 文档中找到让你的生活更轻松的东西，但一无所获。据说offset只支持top/left

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

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

我还包括了标签顶部的 jQuery css 定义。没有定义它 onload，在第一次滚动之前有一个奇怪的文档高度变化。

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

于 2012-07-02T17:36:30.820 回答