issue changing height with jQuery and waypoints.js

Question

I have a fixed position footer that gets it's top position from a jquery function. Using waypoints, when I scroll down so #main is 'bottom-in-view' I cannot get the height of the footer to change. Anyone have any ideas? Ultimately this will need to slide down and reveal more footer content. here is the fiddle Is there anyway to animate height on a fixed position element?

Here is the jQuery code:

$(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' });
        }
    });

you dont need to enclose your jquery function second time with $(function(){}). — Ol Sen
yup got it. was splicing together chunks and forgot to remove — Dirty Bird Design

George Hodgson George Hodgson · Accepted Answer · 2013-05-08T04:08:55

Your code is executing correctly and the footer to be assigned the larger height of 550. However, because it has position: fixed the rest of the height is displayed off the bottom of the screen. Calling position() after adjusting the height will fix your issue.

See the fix here: http://jsfiddle.net/VxqNa/

Note, if you use the jQuery animate() function, you must call position() after the animation is completed by passing a function to be used as a complete handler. For example:

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

issue changing height with jQuery and waypoints.js

1 Answers