Question

我已经把头发拉了几个星期了，试图解决这个问题。有很多事情要发生，所以我会尽力解释。但是，当我在移动设备或平板电脑上向上/向下滑动页面时，我想要解决的是网站粘性导航中的一个奇怪的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>

我不确定在这里粘贴什么来让你知道冲突的来源，所以如果你有任何线索可以从哪里开始，请问我代码。

最后，超级糟糕的是，您无法在桌面浏览器中重新创建此问题。即使更改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。

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

1 个答案: