使用jquery为ipad设置固定控制栏

时间:2010-12-16 20:32:02

标签: jquery ipad header fixed

我有这个jquery代码,对于普通的浏览器,你可以使用一个粘性标题。因此,默认情况下,它会在您想要的任何地方显示标题的内容,然后滚动该标题将在您滚动时随身携带。问题是它不适用于iPad。有人可以查看代码,看看我是否可以更改某些内容以使其在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');
        }

1 个答案:

答案 0 :(得分:0)

答案是使用不同的解决方案,如sencha touch。