I have this jquery code that for a normal browser allows you to have a sticky header. So by default it shows the content of the header wherever you want then as you scroll that header will then stay with you as you scroll. The problem is it doesnt work for an iPad. Can someone look at the code and see if there is something I can change to make this work on an iPad?
// Fixed control bar
var controlBar = $('#control-bar');
if (controlBar.length > 0)
{
var cbPlaceHolder = controlBar.after('<div id="cb-place-holder" style="height:'+controlBar.outerHeight()+'px"></div>').next();
// Effect
controlBar.hover(function()
{
if ($(this).hasClass('fixed'))
{
$(this).stop(true).fadeTo('fast', 1);
}
}, function()
{
if ($(this).hasClass('fixed'))
{
$(this).stop(true).fadeTo('fast', 1);
}
});
// Listener
$(window).scroll(function()
{
// Check top position
var controlBarPos = controlBar.hasClass('fixed') ? cbPlaceHolder.offset().top : controlBar.offset().top;
if ($(window).scrollTop() > controlBarPos)
{
if (!controlBar.hasClass('fixed'))
{
cbPlaceHolder.height(controlBar.outerHeight()).show();
controlBar.addClass('fixed').stop(true).fadeTo('slow', 1);
// Notifications
$('#notifications').animate({'top': controlBar.outerHeight()+notificationsTop});
}
}
else
{
if (controlBar.hasClass('fixed'))
{
cbPlaceHolder.hide();
controlBar.removeClass('fixed').stop(true).fadeTo('fast', 1, function()
{
// Required for IE
$(this).css('filter', '');
});
// Notifications
$('#notifications').animate({'top': notificationsTop});
}
}
}).trigger('scroll');
}