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

Question

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

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

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

所以我什至不知道要在这里显示什么代码，但这是用于粘性 header 的 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>

我什至不确定在这里粘贴什么来让您了解冲突的来源，所以如果您对从哪里开始有任何线索，请向我索取代码。

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

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

Answer 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。