Question

我有一个固定的位置页脚，它从jquery函数中获得它的顶部位置。使用航点，当我向下滚动以便#main是'底部视图'时我无法改变页脚的高度。有人有主意吗？最终，这将需要向下滑动并显示更多页脚内容。 here is the fiddle无论如何在固定位置元素上设置动画高度？

这是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' });
        }
    });

Answer 1

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

请参阅此处的修复：http://jsfiddle.net/VxqNa/

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

$('footer').animate({height:'110px'},300,'swing', position);

使用jQuery和waypoints.js更改高度问题

1 个答案: