I recently had a need to use a Fixed position overlay and found that Fancybox breaks if I set #fancybox-wrap to position:fixed. I believe the centerOnScroll option was supposed to solve this problem by recalculating the absolute position of #fancybox-wrap upon scrolling. The problem with this approach is that the overlay ‘shudders’ or ‘feels jumpy’ when you scroll in Firefox, Opera and IE7+.
Luckily the fix is actually pretty simple with the following steps:
1. Get a copy of the source code – jquery.fancybox-1.3.1.zip
2. Do a in-code-search
Open jquery.fancybox-1.3.1.js and look for the fancybox_get_viewport function (should be around line 56), the function should look like this:
fancybox_get_viewport = function() {
return [ $(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
},
3. Change it to look like this:
fancybox_get_viewport = function() {
var isFixed = wrap.css('position') === 'fixed'; // add support for fixed positioning
return [ $(window).width(), $(window).height(), isFixed ? 0 : $(document).scrollLeft(), isFixed ? 0 : $(document).scrollTop() ];
},
4. Add some CSS
Add the following clauses to your CSS files (ensure these clauses load after the jquery.fancybox-1.3.1.css file):
#fancybox-wrap {
position: fixed;
}
* html #fancybox-wrap { /* IE6 */
position: absolute;
}
That’s it!
Basically what the fix does is detect whether the wrapper is a fixed position element, if so it would return 0 for the scrollLeft and scrollTop values of the viewport. So even if you’re not using a fixed position element you can add this fix in as it’s non-destructive.