移動設備和平板電腦上的粘性標題上的奇怪flickr

我已經把我的頭髮拉了幾個星期，字面上，試圖解決這個問題。有很多事情要做，所以我會盡力解釋。但是我想要解決的是，在移動設備或平板電腦上向上/向下滑動頁面時，該網站粘滯導航中的一個奇怪的flickr。它只在兩頁上做到這一點，所以我知道這些頁面上粘滯的頭文件jQuery和其他一些javascript函數有衝突。移動設備和平板電腦上的粘性標題上的奇怪flickr

所以有一點背景：我們使用這個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.

來源

2013-07-03 Trevan Hetzel

你在第一個HTML頁面的jQuery移動在實例添加此？

<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的手機1.3.1導致一些閃爍，所以我堅持1.3.0。目前。

此外，您可以使用'vclick'替換'點擊'和'點擊'，jquery將檢測它在哪個平臺上運行，因此如果它是移動平臺，將使用點擊。

來源

2013-07-03 07:23:19 abdu

是的元標記。雖然你的重複'''最大規模'''兩次。我正在使用1.2.1 jQuery移動庫。將嘗試升級。 –

移動設備和平板電腦上的粘性標題上的奇怪flickr

回答

相關問題