0

我有一个固定位置的页脚，它从 jquery 函数中获取它的顶部位置。使用航路点，当我向下滚动时，#main 是“底部视图”，我无法改变页脚的高度。有人有想法么？最终，这将需要向下滑动并显示更多页脚内容。这是小提琴无论如何要在固定位置元素上设置高度动画吗？

这是jQuery代码：

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

        if (screen.width >= 768){
                $('#main').waypoint(function(direction) {
                    if (direction === 'down') {
                        $('footer').css({'height': "500px"});
                        alert('hit rock bottom');
                    }
                }, { offset: 'bottom-in-view' })
                .waypoint(function(direction){
                    if (direction === 'up') {
                        //$('footer').animate({height:'110px'},300);
                    }
                }, { offset: 'bottom-in-view' });
        }
    });
4

1 回答 1

1

您的代码正在正确执行，并且要为页脚分配更大的高度 550。但是，因为它具有position: fixed其余的高度，所以显示在屏幕底部之外。position()调整高度后调用将解决您的问题。

在此处查看修复：http: //jsfiddle.net/VxqNa/

注意，如果使用 jQueryanimate()函数，则必须position()在动画完成后通过传递一个用作complete处理程序的函数来调用。例如：

$('footer').animate({height:'110px'},300,'swing', position);
于 2013-05-08T04:08:55.420 回答