Question

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

Answer 1

The answer to this was use a different solution like sencha touch.