0

我有一个页面 - 这里有一个固定的页脚。主要内容#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，这与我现在所拥有的几乎相反，并且能够使用某种动画，所以它不像现在那么不稳定. 任何朝着正确方向的推动都非常感谢。

4

1 回答 1

1

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

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

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

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

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

$('footer').css({'position':'relative', 'height':'60px'}).animate({'height':'600px'}, 400) ;
于 2013-05-09T18:17:02.820 回答