2013-09-27 51 views
0

我有一個網頁帶有一個選項卡式的導航欄,是在頁面上的一些方法。該頁面具有響應性,因此窗口的高度和寬度可能會發生變化。我的代碼在桌面環境中工作正常,但是當我將其拉到iPhone或iPad上時,$(window).scroll函數的響應速度很慢。我將向下滾動,並且只有當屏幕停止滾動時,我的功能纔會發生。它使我的固定導航延遲出現或消失。有什麼建議麼?下面的代碼示例:

HTML:

<div id="retail-nav"> 
       <div id="navwrap"> 
        <ul> 
         <li id="retail-tab-1"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li> 
         <li id="retail-tab-2"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li> 
         <li id="retail-tab-3"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li> 
        </ul> 
       </div> 
      </div> 
      <div id="retail-nav-float"> 
       <div id="navwrap-float"> 
        <ul> 
         <li id="retail-tab-1-float"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li> 
         <li id="retail-tab-2-float"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li> 
         <li id="retail-tab-3-float"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li> 
        </ul> 
       </div> 
      </div> 

的JavaScript

var navHeight = jQuery('#retail-nav').offset().top; 
       jQuery(window).scroll(function() { 
        if(jQuery(window).scrollTop() > navHeight) { 
         jQuery('#retail-nav-float').css('display', 'inline'); 
        }else{ 
         jQuery('#retail-nav-float').css('display', 'none'); 
        } 
       }); 

CSS:

#retail-nav{ 
    width: 100%; 
    height: 55px; 
    background-color: #494949; 
    overflow: hidden; 
    position: relative; 
} 
#retail-nav-float{ 
    width: 100%; 
    height: 55px; 
    background-color: #494949; 
    overflow: hidden; 
    position: fixed; 
    top:0; 
    display: none; 
} 
#navwrap, #navwrap-float{ 
    height: 100%; 
    width: 100%; 
    max-width: 1012px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -13px; 
    text-align:center; 
    line-height: 55px; 
} 

回答

1

對於手機&平板電腦,你將不得不增加touchmove事件。

例如

element.addEventListener("touchmove", touchMove, false); 

本頁面去深入瞭解它: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

我希望這可以幫助你!

+0

我一直在試圖圍繞這個包裹我的頭,但我無法弄清楚如何實現這一點,可以有效地取代桌面上的滾動事件... – Watty