scrolltofixed limit issue and flickering

Question

I've a weird issue if I use to call the limit of the footer with scrolltofixed plugin in a function.

I've made this workaround with the limit, because of other troubles with the footer and dynamic content.

here is the original fiddle:

$('.footer').scrollToFixed( {
    bottom: 0,
    limit: $('.footer').offset().top,
    preFixed: function() { 
        $(this).find('h1').css('color', 'blue'); 
    },
    postFixed: function() { 
        $(this).find('h1').css('color', ''); 
    }
});

and here the fiddle with my magical flickering footer:

$('.footer').scrollToFixed( {
    bottom: 0,
    limit: function() {
        return $('.footer').offset().top - $('.summary').outerHeight() - 0;
    }
});

Can anyone please point out that am I missing here?

Answer 1

Create a marker element, I called mine .footer-marker, placed just above the .footer. Then, use this in the footer's limit function.

limit: function() { return $('.footer-marker').offset().top; }

Here is the modified fiddle:

http://jsfiddle.net/ZczEt/1650/

I removed the summary outer height subtraction as it did not appear to do anything.

Also, the summary now returns a function for its limit as I am assuming the summary has dynamic content. The limit as a function here will compensate for dynamic content loaded into the summary.

Hope that helps.