移动设备和平板电脑上的粘性标题上的奇怪 flickr

Posted 2023-05-09

【中文标题】移动设备和平板电脑上的粘性标题上的奇怪 flickr

【英文标题】：Weird flickr on sticky header on mobile devices & tablets

【发布时间】：2013-06-30 16:23:07

【问题描述】：

从字面上看，我已经把头发拔了好几个星期，试图解决这个问题。有很多事情发生，所以我会尽力解释。但我要解决的是在移动设备或平板电脑上向上/向下滑动页面时，网站的粘性导航中出现了一个奇怪的 flickr。它只在两个页面上执行此操作，所以我知道这些页面上的粘性标题 jQuery 和其他一些 javascript 函数存在冲突。

所以有一点背景知识：我们正在使用这个Mobile Detect php 类来检测手机和平板电脑浏览器。我们还使用 jQuery 移动库来利用滑动手势来滑动图像滑块。我遇到问题的主页是工作页面：http://hybridmediadesign.com/work，它没有滑块，但确实使用了isotope。

似乎 jQuery 移动库是导致闪烁的原因，因为删除它可以消除闪烁。就像当您点击或滑动设备时，它会随机导致标题导航失去其持久类。

所以我什至不知道在这里显示什么代码，但这是用于粘性标题的 jQuery：

<script>
window.weAreLoaded = false;
(function($) 
    var documentBind = ($.browser.mobile == true ? 'pageinit' : 'ready');

    $(document).bind(documentBind, function() 
        if(!weAreLoaded) 
            $(window).scroll(function(e) 
                var position = $.browser.webkit ? e.target.body.scrollTop : e.target.documentElement.scrollTop, header_height = 124;

                if ($(window).width() > 540) 
                    if (position >= header_height) 

                        if (!$('body').hasClass('persistent')) 
                            $('body').addClass('persistent').css('padding-top', 55);
                            $('.persistent header').animate(
                                'top' : 0
                            , 600);
                        
                     else 
                        $('.persistent header').css('top', '-69px');
                        $('body').removeClass('persistent').css('padding-top', 0);
                    
                
            );

</script>

我不知道在这里粘贴什么内容可以让您了解冲突的来源，所以如果您对从哪里开始有任何线索，请向我询问 codez。

最后，最糟糕的是，您无法在桌面浏览器中重现此问题。即使更改 UA 也不会重现问题。我真的不得不拿出我的 iPhone 进行测试，这太糟糕了，因为我只是在黑暗中拍摄试图修复东西。啊！！

更新 Here's the link to the full javascript file used throughout the site.

【参考方案1】：

您是否在 jquery mobile 实例化的第一个 html 页面上添加了这个？

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

这解决了我运行 jquery mobile 的应用程序的闪烁问题。 jquery mobile 1.3.1 也引起了一些闪烁，所以我坚持使用 1.3.0。暂时。

您还可以使用“vclick”来替换“tap”和“click”，jquery 将检测它在哪个平台上运行，因此如果它是移动平台，将使用 tap。

【讨论】：

对元标记是。虽然你的重复maximum-scale 两次。我正在使用 1.2.1 jQuery 移动库。将尝试升级。