jquery - 获取固定页脚以在滚动时从上到下扩展高度

Question

我有一个 page - here带有固定的页脚。主要内容 #mid.stages > .stages 滚动到页脚后面，当您滚动到页面底部时使用 jQuery 路标，页脚需要获得高度(从上到下)和部分 #topFooter 需要从上到下扩展以显示其内容。我一直在尝试各种解决方案都无济于事，这是因为在最初加载时，页脚具有固定位置，并且它的“显示”部分位于浏览器窗口之外。

    $(function(){
        var position = function () {
            var w = $(window).height();
            //var f = $('footer').height();
            var foo = (w-110);
            console.log(foo);
            $('footer').css('top', foo);
        };
        $(document).ready(position);
        $(window).resize(position);

        $('#mid').waypoint(function(direction) {
            var stagePOS = $('.stage').position();
            if (direction === 'down') {
                //$('footer').animate({height:'600px', top:'stagePOS.top'},300,'swing', position);
                $('footer').css({'position':'absolute', 'height':'600px','top':'stagePOS.top'});
                $('.tfContent').css({'height':'200px'});
                $('p.extra').fadeIn('fast');
            } else if (direction === 'up') {
                $('footer').css({'position':'fixed','top':'foo'});
                $('.tfContent').css({'height':'60px'});
                $('p.extra').slideUp('fast');
            }
            position();
        }, { offset: 'bottom-in-view' });
    });

我需要页脚从上到下展开，所以它不会覆盖 #mid.stages > .stages 中的内容，这与我现在的情况正好相反，并且能够使用某种动画，这样它就不会像现在这样起伏不定了。非常感谢任何朝着正确方向的插入。

Answer 1

我注意到您指的是引号之间的一些变量。您需要删除这些引号。在以下行中:

$('footer').css({'position':'absolute', 'height':'600px','top':stagePOS.top});

在这一行中我也没有看到变量 foo，我看到的唯一一个是在位置函数中定义的。除非您在代码的其他地方有它，否则您需要用计算替换它:

$('footer').css({'position':'fixed','top':$(window).height()-110});

此外，我注意到您将页脚的顶部设置为第一阶段元素的顶部，这就是它向上增长并覆盖内容的原因。我建议尝试使页脚位置相对，高度为 60px 并动画增长到 600px。因此它将保留在内容下方，并且页面将增长以包含它。

$('footer').css({'position':'relative', 'height':'60px'}).animate({'height':'600px'}, 400) ;