0

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

所以一点背景知识：我们正在使用这个Mobile Detect PHP 类来检测手机和平板电脑浏览器。我们还使用 jQuery 移动库来利用滑动手势来滑动图像滑块。我遇到问题的主页是 Work 页面：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 进行测试，这太糟糕了，因为我只是在黑暗中拍摄试图修复东西。啊！！

更新 这里是整个网站使用的完整 javascript 文件的链接。

4

1 回答 1

0

您是否在 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。

于 2013-07-03T07:23:19.517 回答